Have you ever wondered how ng-attr is evaluated for elements inserted using ng-bind-html? Check out this JS Fiddle demonstration.
Here's the HTML:
<body ng-app="TestApp" ng-controller="TestCtrl">
<div ng-bind-html='y | to_trusted'></div>
<svg width="100" height="100">
<path ng-attr-d="M{{x}},10L50,50L10,50Z" />
</svg>
</body>
And here's the Javascript:
var app = angular.module("TestApp", []);
app.controller('TestCtrl', function ($scope, $interval) {
$scope.y = '<svg width="100" height="100"><path ng-attr-d="M{{x}},10L50,50L10,50Z"/></svg>';
$scope.x = 10;
});
app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);
The evaluation of ng-attr-d in the second path element works, but not in the first one.