title: AngularJS - Local directive and parent scope
body: <p>I'm getting started with writing directives and I'm pretty sure I grasp the whole concept of defining an 'isolate' scope for a directive.</p>
  
  <p>My directive <code>numberRoulette</code> is supposed to animate each digit (or a supplied number of digits through attribute <code>fields="some-number-here"</code>) in a supplied number with random numbers. Every elapsed second, one digit stops animating and is set to its intended number. It 's a bit like a slot machine..</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
    &lt;div ng-controller="MasterCtrl"&gt;
      &lt;span number-roulette fields="10" ng-model="number"&gt;
        {{number}}
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem I'm running into is that when I make a two-way binding between the directive scope and a scope used by a controller <code>MasterCtrl</code>, my values stop displaying.</p>
  
  <pre><code>app.directive('numberRoulette', function($timeout) {
    return {
      restrict: 'A',
      scope: {showNumber: '=ngModel'},
      ...
    };
  });
  
  function MasterCtrl($scope) {
    $scope.number = 1000;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/nguyening/aX6Zm/3/" rel="nofollow">http://jsfiddle.net/nguyening/aX6Zm/3/</a></p>