title: How do I access ng-model values inside my directive template?
body: <p>I have a directive with a template that looks like</p>
  
  <pre><code>&lt;!-- selectList.tpl.html --&gt;
  &lt;div ng-if="selectList"&gt;
    &lt;p&gt;Id: {{$id}}&lt;/p&gt;
    &lt;p&gt;Current list item {{currentItem}}&lt;/p&gt;
    &lt;select ng-model="currentItem"
      name="current-item"
      ng-options="item as item.value group by item.group for item in selectList"&gt;
      &lt;option value=""&gt;All&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to access the <code>currentItem</code> value from inside my directive link function to create a watch function ie,</p>
  
  <pre><code>app.directive('selectList', [
    "$rootScope",
    "$timeout",
    function (
      $rootScope,
      $timeout
    ) {
      "use strict";
  
      var getList = function() {
        // ...
      };
  
      return {
        restrict: 'E',
        templateUrl: 'selectList.tpl.html',
        link: function(scope, element, attrs) {
          scope.selectList = getList();
          scope.currentItem = "";
  
          console.log("scope id:", scope.$id);
  
          scope.$watch('currentItem', function(item) {
            $timeout(function() {
              console.log("currentItem is", item);
              angular.element("#console").append("&lt;p&gt;Updated item: " + item + "&lt;/p&gt;");
            });
          });
        }
      };
    }
  }
  </code></pre>
  
  <p>However, a child scope is created under the linkscope which stores changes to the values of the select box. How do I access the select box changes inside my directive link code?</p>
  
  <p>I'm using Angular 1.1.5.</p>
  
  <p>Here is a plunker of the problem (have updated code in the q to reflect the plunker): <a href="http://plnkr.co/edit/5eOaRE?p=preview" rel="nofollow">http://plnkr.co/edit/5eOaRE?p=preview</a></p>