I am trying to update my view using model in angular directive here is the directive I have created

app.directive('aboutOptions', [function() {
        return {
            restrict: 'C',
            scope: {
                testing: '='
            },
            transclude: true,
            link: function(scope, elem, attr) {
            scope.$watch(attr.ngModel, function() {
                console.log(scope.$eval(attr.ngModel));
                scope.testing = scope.$eval(attr.ngModel);
            });
        }
    }
}]);

here is html model and file name is ab.html

<input type="text" class="about-options" ng-model="testing" />

Here is the view to be updated and file name is show.html

<h2 class="about-options">{{testing}}</h2>

ab.html file will be loaded as a template inside jquery ui dialog and my show.html file is in main page

If I remove

scope: {
       testing: '='
},

Console is showing what I am typing

Update - 1

Tried with the following changes

testing: '=test'

And in html

<input type="text" class="about-options" ng-model="testing" />

<h2 class="about-options">{{test}}</h2>