AngularJS: ng-click of directive's child element not working

Issue

I have set up the plunker to demonstrate the issue. The click of Bob button doesn't works. What I expected was, the child elements of the directive element will have the same isolated scope. Do I have to move the child elements into the template property of the directive?

Solution

I would define some object pass. Set up pass with method setDirectiveTitle and title:

Demo Plunker

JS

angular.module("myApp", [])
  .directive("myScopedDirective", function() {
    return {
      scope: {
        pass: '=',
        prefix: "@msdTitle"
      },
      link: function($scope, $element, $attributes) {
        
        $scope.pass.setDirectiveTitle = function(title) {
         $scope.pass.title = $scope.prefix + title;
        } 
      }
    };
  })
  .controller("AppController", ["$scope", function($scope) {
    
    $scope.passVal = {};
    
    $scope.setAppTitle = function(title) {
      $scope.passVal.title = title;
    };
  }]);

HTML

<div ng-controller="AppController">
      <h2>{{title}}</h2>
      <button ng-click="setAppTitle('App 2.0')">Upgrade Me!</button>
      <div my-scoped-directive pass="passVal" msd-title="I'm a directive inside the app: {{passVal.title}}">
        <h2>{{passVal.title}}</h2>
        <button ng-click="passVal.setDirectiveTitle('Bob')"  >Bob It!</button>
      </div>
    </div>

Answered By - Maxim Shoustin