<!DOCTYPE html>
<html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Controller Inheritance in AngularJS</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//code.angularjs.org/1.1.1/angular.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="ChildCtrl">
    <div>Gettting absolute url from parent: <strong>{{url}}</strong></div>
    <div>Refer to <a href="https://groups.google.com/d/msg/angular/qqncwxdcVgw/Kqoswky69-oJ" target="_blank">this thread</a> for more details.</div>
  </body>

</html>
(function () {
  var app = angular.module('angularjs-starter', []);
  
  var ParentCtrl = function ($scope, $location) {
    $scope.path = function () {
      return $location.absUrl();
    };
  };

  app.controller('ChildCtrl', function($scope, $injector) {
    $injector.invoke(ParentCtrl, this, {$scope: $scope});
    $scope.url = $scope.path();
  });
})();
/* CSS goes here */