scope.$watch(attrs. is not working with a custom directive - angularjs

Question

I am using scope.$watch to look for changes on an attribute-based directive. These changes are initiated by an ng-model binding on an input element in the view. The directive attribute on the view is being watched using scope.$watch in the directive. Yet the change event never seems to fire in the directive. What is causing my code to break?
The portions highlighted in the code below, where I log to the console (in the directive code, with stars), never fire. The change to the controller scope, via ng-model on the input, is not being propagated to the directive.
If I change the attribute value to a static string, rather than binding it via ng-model, it works.
This code is taken from a working example in the AngularJS documentation here. I cannot 'spot the difference' as the code in the documentation is very similar to mine.
angular.module('myApp.advancedDirectives', [
'myApp.advancedDirectives.advancedDirectives-directive'
])
.value('data', { name: 'John', surname: 'Smith' })
angular.module('myApp.advancedDirectives.advancedDirectives-directive', [])
.directive('advancedDirectives', ['$interval', 'dateFilter', 'data', function ($interval, dateFilter, data) {
console.log(data.length);
function link(scope, element, attrs) {
var format,
timeoutId;
scope.$watch(attrs.advancedDirectives, function (theFormat) {
format = theFormat;
**console.log(theFormat);
updateTime();**
});
element.on('$destroy', function () {
$interval.cancel(timeoutId);
});
// start the UI update process; save the timeoutId for canceling
timeoutId = $interval(function () {
updateTime(); // update DOM
}, 1000);
function updateTime() {
scope.directiveScope2 = dateFilter(new Date(), format);
}
}
var theScope = {
directiveScope1: '=info'
}
return {
templateUrl: 'components/advancedDirectives/advancedDirectivesTemplate.html',
scope: theScope,
link: link
}
}]);
<div ng-controller="viewAdvancedDirectivesCtrl">
<div>
<div><input ng-model="theViewFormat"/></div>
<div>Data from the directive scope: <span advanced-directives="theViewFormat" info='data'></span></div>
</div>
</div>
<span style='background:yellow'>Advanced Directive. Here is some data: {{directiveScope1.name}} {{directiveScope1.surname}}, alive at {{directiveScope2}}</span>

Answer 1

As you are using isolated scope for your directive, theViewFormat value wouldn't be available inside your directive context.
Either you need to use $parent.+ attrs.advancedDirectives while placing $watch
OR
More preferred way would be pass advancedDirectives via attribute to isolated scope like you did for passing info data
var theScope = {
directiveScope1: '=info',
advanced: '=advancedDirectives'
}
Then simply your watch would be on 'advanced' string.
scope.$watch('advanced', function (theFormat) {
format = theFormat;
console.log(theFormat);
updateTime();**
});

Answer 2

Here is my answer:
Below, please see the view code.
Note: I used curly-braces for {{theViewFormat}}
<div ng-controller="viewAdvancedDirectivesCtrl">
<div>
<div>Data from the directive scope: <span advanced-directives="{{theViewFormat}}" info='data'></span></div>
</div>
</div>
The link code looks like below.
Note: Use of $observe (as recommended by #Anik)
Note: I am observing on the attrs, rather than on the directive scope object, therefore avoiding recursive calls to updateTime, and I am now observing the attribute change, rather than the scope change, which matches my requirement.
function link(scope, element, attrs) {
var format,
timeoutId;
attrs.$observe('advancedDirectives', function (theFormat) {
format = theFormat;
console.log('format changed: ' + format);
updateTime();
});
element.on('$destroy', function () {
$interval.cancel(timeoutId);
});
// start the UI update process; save the timeoutId for canceling
timeoutId = $interval(function () {
updateTime(); // update DOM
}, 1000);
function updateTime() {
scope.directiveScope2 = dateFilter(new Date(), format);
console.log('updateTime: ' + format + dateFilter(new Date(), format));
}
}
The updateTime() code, which updates the directive scope is as follows:
function updateTime() {
scope.directiveScope2 = dateFilter(new Date(), format);
console.log('updateTime: ' + format + dateFilter(new Date(), format));
}
Thanks to #Pankaj and #Anik for getting me a long way ahead.