AngularJS Example:

by Bretto

HTML

<div ng-app>
    <script type="text/ng-template" id="mytemplate">
        <p>item: <b>{{item}}</b></p>
    </script>
    
  <div ng-controller="Ctrl">
      My model says I have {{model.items.length}} items. Here they are
      <br />
      <ng-include src="'mytemplate'" ng-repeat="item in model.items"></ng-include>
       This is going to change in a few seconds. As the model updates, the count ({{model.items.length}}) is updated, but the template is not applied to the new model.  Is this a bug?
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<style>

JavaScript

function Ctrl($scope, $timeout) {
    // initial model
    $scope.model = { 
        items: ['apple', 'banana' ]
    };
    
    $timeout(function () {
        // updated model
        $scope.model = {
            items: ['citrus', 'orange', 'plum']
        };        
    }, 3000);
}