Untitled

<!DOCTYPE html>
<html ng-app="testApp">

  <head>
    <title>Inheritence example</title>
  </head>

  <body>
    <div ng-controller="ParentController">
    {{ test }}

    <button ng-click="sayBye()">Bye</button>
    <div ng-controller="ChildController">
        {{ test }}
        <button ng-click="sayMorning()">Morning</button>
    </div>
</div>
    
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="script.js"></script>
  </body>
</html>

(function () {
    angular.module('testApp', [])
            .controller('ParentController', function ($scope) {
                $scope.test = 'Hello';

                $scope.sayBye = function () {
                    $scope.test = 'Bye';
                }
            })
            .controller('ChildController', function ($scope) {
                $scope.sayMorning = function () {
                    $scope.test = 'Morning';
                }
            });
})();