The custom ng-once directive

http://stackoverflow.com/questions/13651578/how-to-unwatch-an-expression

HTML

<div ng-app="transclude">
  <div ng-controller="Ctrl">
      <p>Without &lt;ng-once&gt;</p>
      <ul>
          <li ng-repeat="item in contents">
              {{item.title}}: {{item.text}}
          </li>
      </ul>
      <button ng-click="add()">Update a record</button>
      <p>With &lt;ng-once&gt; scope is destroyed as soon as the $digest cycle finishes, thus preventing it from being reachable</p>
      <ul>
          <li ng-repeat="item in contents" ng-once>
              {{item.title}}: {{item.text}}
          </li>
      </ul>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<style>
​.ng-invalid { border: 1px solid red; }​

JavaScript

function Ctrl($scope) {
    $scope.contents = [{title: "Normal", text: "ordinary"},
                       {title: "static", text: "boring"}];
    var last = {title: "Live updating", text: "This item can change"};
    $scope.contents.push(last);
    $scope.add = function () {
        last.text += " :)";
    }
}

angular.module('transclude', [])
 .directive('ngOnce', ['$timeout', function($timeout){
    return {
      restrict: 'EA',
      priority: 500,
      transclude: true,
      template:  '<div ng-transclude></div>',
        compile: function (tElement, tAttrs, transclude) {
            //console.log([tElement, tAttrs, transclude])
            return function postLink(scope, iElement, iAttrs, controller) {
                $timeout(scope.$destroy.bind(scope), 0);
                //scope.$destroy()
                //console.log([scope, iElement, iAttrs, controller]);
            }
        }
    };
}]);