Infinite digest due to parentValueWatch comparing $sce by object, not value

[Michael Natkin]

Demo: (be sure and open console) http://jsfiddle.net/michaelnatkin/2Vf8L/4/

This happens when you have a directive with an isolate scope and an = bound attribute, and you bind that to a function in the outer scope that returns $sce wrapped html. parentValueWatch compares the return value by object, not value, so it looks new every time and you get an infinite digest. Similar to, but not identical to, http://stackoverflow.com/questions/19306452/how-to-fix-10-digest-iterations-reached-aborting-error-in-angular-1-2-fil .

The workaround is the same, I use a little cache to make sure I return the same object, but this should clearly be fixed in angular core.

Here's the offending code:

HTML:

<div ng-app="myApp"> 

    <div ng-controller="BugCtrl">

       <div to-infinity value="getValue()"></div>

    </div>

</div>

 JS:

angular.module('fun', [])

angular.module('myApp', ['fun']).directive('toInfinity', 

    function($sce) {

      return {

        scope: {'value' : '='},

        restrict: 'A',

        template: "<p ng-bind-html='value'></p>",

      };

    }

);

function BugCtrl($scope, $sce) {

  $scope.getValue = function() {

    return $sce.trustAsHtml('<h1>badass</h1>');

  }

}

Workaround (used in lieu of $sce.trustAsHtml)

this.trustButVerify = (value) ->

  this.converted[value] || (this.converted[value] = $sce.trustAsHtml(value))