title: Angular directive: using ng-model within isolate scope
body: <p>I'm having trouble working out how I can define a custom directive that both:</p>
  
  <ol>
  <li>Uses isolate scope, and</li>
  <li>Uses the ng-model directive in a new scope within in its template.</li>
  </ol>
  
  <p>Here's an example:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body ng-app="app"&gt;
    &lt;div ng-controller="ctrl"&gt;
      &lt;dir model="foo.bar"&gt;&lt;/dir&gt;
      Outside directive: {{foo.bar}}
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var app = angular.module('app',[])
    .controller('ctrl', function($scope){
      $scope.foo = { bar: 'baz' };
    })
    .directive('dir', function(){
      return {
        restrict: 'E',
        scope: {
          model: '='
        },
        template: '&lt;div ng-if="true"&gt;&lt;input type="text" ng-model="model" /&gt;&lt;br/&gt;&lt;/div&gt;'
      }
    });
  </code></pre>
  
  <p>The desired behaviour here is that the input's value is bound to the outer scope's <code>foo.bar</code> property, via the the directive's (isolate) scope <code>model</code> property. That doesn't happen, because the ng-if directive on the template's enclosing div creates a new scope, so it's that scope's <code>model</code> that gets updated, not the directive's scope's.
  Ordinarily you solve these ng-model issues by making sure there's a dot in the expression, but I can't see any way to do that here. I wondered if I might be able to use something like this for my directive:</p>
  
  <pre><code>{
    restrict: 'E',
    scope: {
      model: {
        value: '=model'
      }
    },
    template: '&lt;div ng-if="true"&gt;&lt;input type="text" ng-model="model.value" /&gt;&lt;br/&gt;&lt;/div&gt;'
  }
  </code></pre>
  
  <p>but that doesn't work...</p>
  
  <p><a href="http://plnkr.co/edit/usxZ9aonMUenMDtSXre4?p=preview">Plunker</a></p>