Angular JS observe on directive attribute

Question

How can angular js watch attributes on custom directive in order to accept angular values to be bind

Here is what I have so far:

Answer 1

You can also use a new attribute for your directive instead of data-value:

<tile title="Sleep Duration"  your-new-attribute={{sleepHistory.averageSleepTime}}" />

attrs.$observe('yourNewAttribute', function (newValue, oldValue) {
    if (newValue && newValue !== oldValue) {
        // ...
    }
});

Answer 2

From https://docs.angularjs.org/api/ng/type/$compile.directive.Attributes:

all of these are treated as equivalent in Angular:

<span ng:bind="a" ng-bind="a" data-ng-bind="a" x-ng-bind="a">

So the attribute data-value normalizes to value

So, this is what you want:

attrs.$observe('value', function(val) {

Answer 3

Just watch the value instead of dataValue.

attrs.$observe('value', function (val)  { ...