Angular Directive Isolated Area

Question

I have a directive and a controller according to this (mainly from the Angular JS Directives PacktPub book).

angular.module('myApp',[])
.directive('myIsolatedScopedDirective', function(){
    return {
        scope : {
            'title' : '@msdTitle'
        },
        link: function ($scope, $element, $attrs) {
            $scope.setDirectiveTitle = function (title) {
                $scope.title = title;
            };
        }
    };
})
.controller('MyCtrl', function($scope){
    $scope.title = "Hello World";
    $scope.setAppTitle = function(title){
      $scope.title = title;
    };
});


<div ng-controller="MyCtrl">
    <h2>{{title}}</h2>
    <button ng-click="setAppTitle('App 2.0')">Upgrade me!</button>
    <div my-isolated-scoped-directive msd-title="I'm a directive within the app {{title}}">
        <h4>{{title}}</h4>
        <button ng-click="setDirectiveTitle('bob')">Bob it!</button>
    </div>
</div>

The problem is this: Why <h4>{{title}}</h4>is graded before "Hello World"and why not "I'm a directive within the app Hello World"? Can someone explain this please? Thank.

Plunker

Answer 1

, template, . , , (MyCtrl) .

, , , http://plnkr.co/edit/jmWrNpLFttDPhSooPF0M?p=preview

.directive('myIsolatedScopedDirective', function(){
    return {
        scope : {
            'title' : '@msdTitle'
        },
        replace: true,
        template: '<div><h4>{{title}}</h4>' +
          '<button ng-click="setDirectiveTitle(\'bob\')">Bob it!</button>',
        link: function ($scope, $element, $attrs) {
            $scope.setDirectiveTitle = function (title) {
                $scope.title = title;
            };
        }
    };

<div my-isolated-scoped-directive msd-title="I'm a directive within the app {{title}}"></div>