[AngularJS] Change href can't update the data which bind to ng-src or ng-href

[庄奕峰]

I ask the same question in the stackoverflow, someone give a work solution 
using MutationObserver, but only IE11 support this feature. And I am also 
curious about why the function like scope.$watch() didn't work, is there 
some problem in my code? Or the $watch function can't achieve the desired 
results like MutationObserver?

The stackoverflow link: 
http://stackoverflow.com/questions/29104686/change-href-cant-update-the-data-which-bind-to-ng-src-or-ng-href

Html

<div class="result" ng-controller="test">
    <div>{{result}}</div>
    <a ng-href="{{result}}"></a></div>

JS

App.controller('AppCtrl', function AppCtrl($scope){
    $scope.result = "www.google.com";}

In a jquery file I can't modify because of some reason, some code changed 
the value of href, like:

$('.result>a').attr('href','www.youtube.com');

I want the value of $scope.result in the controller also changed from 
"www.google.com" to "www.youtube.com". But the result value in the div didn't 
change after the jquery code. Do I need write directive to watch the href 
attribute by myself? Or there are some other way to use ng-href? I try to 
write the directive by myself, but it didn't work. I hope you can give me a 
small example. Thanks :)

Update:

This is my directive, it didn't work, after something like 
$('.result>a').attr('href','www.youtube.com'), the console didn't print 
"change!" and the $scope.result didn't change:

APP.directive('result', function() {
    return {
        restrict: 'E',
        scope: {
            ngModel: '='
        },
        template: "<div class='result'><a ng-href='{{ngModel}}' 
href=''></a></div>",
        replace: true,
        require: 'ngModel',
        link: function(scope, element, attrs) {
            var $element = $(element.children()[0]);
            scope.$watch($element.attr('href'), function(newValue) {
                console.log("change!");
                scope.ngModel = newValue;
            })
        }
    };});

Update Again: Still can't work...

Html:

<div class="result">
    <a ng-href="{{result}}" ng-model="result" class="resulta"></a></div>

JS:

APP.directive('resulta', function() {
    return {
        restrict: 'C',
        scope: {
            ngModel: '='
        },
        link: function(scope, element, attrs) {
            scope.$watch(attrs.href, function(newValue) {
                console.log("change!");
                scope.ngModel = newValue;
            })
        }
    };});

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.