How to isolate child controller scope from parent controller scope without changing the view?

Question

Click on the parent button change also child but child button not. I need to change this behavior isolating scopes whith any hacks or other way.

Child controller doesn't inherit from parent controller and must have its own scope!

angular
  .module('app', [])
  .controller('ParentCtrl', function() {})
  .controller('ChildCtrl', function() {})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app=app>
  <div ng-controller=ParentCtrl>
    <button ng-click="text='clicked'">
      {{text || 'parent'}}
    </button>
    <div ng-controller=ChildCtrl>
      <button ng-click="text='clicked'">
        {{text || 'child'}}
      </button>
    </div>
  </div>
</div>

https://jsfiddle.net/nizami/oLwbktz9/

Answer 1

angular
  .module('app', [])
  .controller('ParentCtrl', ['$scope', function($scope) {
  $scope.text = null;
  }])
  .controller('ChildCtrl', ['$scope', function($scope) {
  $scope.text = null;
  }])