title: Directives isolated scope not working properly together with nested views? (AngularJS / UI Router)
body: <p>I'm using ui-router in a AngularJS project where I have a nested view that contains a custom directive. 
  This directive renders an input field (lets say a filter-field) and its value should be in sync with the controller's scope. </p>
  
  <hr>
  
  <p>This works well for this directive, when the view/state not is nested:</p>
  
  <p><a href="http://jsfiddle.net/martinoss/6d7CJ/" rel="nofollow">jsFiddle / not nested / working as expected</a></p>
  
  <pre><code>var myApp = angular.module('myApp', ['ui.router', 'myComponents'])
      .config(['$stateProvider', function ($stateProvider) {
          $stateProvider.
              state('home', {
                  url: '',
                  template: '&lt;my-filter text-filter="theFilter"&gt;&lt;/my-filter&gt;&lt;button ng-click="inspect()"&gt;inspect&lt;/button&gt;{{ theFilter |json}}',
                  controller: 'myController'
              });
      }]);
  
  var components = angular.module('myComponents', []);
  
  components.directive('myFilter', [function () {
      return {
          restrict: 'E',
          template: '&lt;input type="text" name="filter" ng-model="textFilter"&gt;',
          scope: {
              textFilter: '='
          }
      };
  }]);
  
  components.controller('myController', ['$scope', function ($scope) {
      $scope.theFilter = 'initial filter';
  
      $scope.inspect = function () {
          alert($scope.theFilter);
      }
  }]);
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
      &lt;div ui-View&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I change the input field's text, it gets reflected on the scope...</p>
  
  <hr>
  
  <p>...but when I nest the view/state, the value on the scope keeps it's initial value but I expect it to get changed according to the input field's value when overwriting.</p>
  
  <pre><code>var myApp = angular.module('myApp', ['ui.router', 'myComponents'])
      .config(['$stateProvider', function ($stateProvider) {
          $stateProvider.
              state('home', {
                  abstract: true,
                  url: '',
                  template: 'Nested View:&lt;div ui-view&gt;&lt;/div&gt;',
                  controller: 'myController'
              }).
              state('home.detail', {
                  url: '',
                  template: '&lt;my-filter text-filter="theFilter"&gt;&lt;/my-filter&gt;&lt;button ng-click="inspect()"&gt;inspect&lt;/button&gt;{{ theFilter |json}}'
              });;
      }]);
  
  
  var components = angular.module('myComponents', []);
  
  components.directive('myFilter', [function () {
      return {
          restrict: 'E',
          template: '&lt;input type="text" name="filter" ng-model="textFilter"&gt;',
          scope: {
              textFilter: '='
          }
      };
  }]);
  
  components.controller('myController', ['$scope', function ($scope) {
      $scope.theFilter = 'initial filter';
  
      $scope.inspect = function () {
          alert($scope.theFilter);
      }
  }]);
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>&lt;div ng-app="myApp" &gt;
      &lt;div ui-View&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here, the text on the scope (see controller) remains the same.</p>
  
  <p>Any idea how I can get the same result with nested views as in the first example?</p>
  
  <p>PS: The directive needs to remain reusable</p>
  
  <p><a href="http://jsfiddle.net/martinoss/uVC6R/" rel="nofollow">jsFiddle / nested / not working as expected</a></p>