title: angular component directives and templateurl, different response to outside controller
body: <p>I am getting some behavior that was unexpected with my first foray into directives. </p>
  
  <p>I am using a directive with a templateurl and isolated controller. I was expecting the dom inside the templateurl to react based on 2 way binding between the dom ( in this case a select element ) and the directives controller. I put a '$watch' on the bound attribute, which fires off when the directive is first loaded. But then if the user selects a different option, it does not fire. This is not the normal functionality ive come to expect from my experience with controllers so far.</p>
  
  <p>my directive is as follows:</p>
  
  <pre><code>    (function () {
      'use strict';
      var projMgrApp = angular.module('projMgrApp')
  
          .directive('elementStructure', function () {
  
              var structureController = ['$location', '$scope', '$window', '_', '$http', 'isAdmin', 'pmElement',
                          'GetProject', 'Enums', 'Users',
                  function ($location, $scope, $window, _, $http, isAdmin, pmElement, GetProject, Enums, Users) {
  
                      /* Ive removed most code for simplification
                      */
                      $scope.NewElementType = null;
                      $scope.$watch('NewElementType', function (val) { alert(val); })
                  }];
  
              return {
                  restrict: 'EA',
                  scope: {
                      elementType: '@',
                      projectId: '@',
                      structureTemplate: '@'
                  },
                  controller: structureController, 
                  templateUrl: '/partials/structure.html',
              };
          });
  
  })();
  </code></pre>
  
  <p>Inside my template url I have this select which im expecting to call the watcher..</p>
  
  <pre><code>&lt;select class="form-control"
     ng-options="d for d in ProductionCategoryOptions" ng-model="NewElementType"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>Im loading this directive twice as separate components ( and not <strong>intending</strong> to share any values )</p>
  
  <pre><code>&lt;fieldset class="tab-pane fade in" id="ProductionStructure"&gt;
       &lt;element-structure element-type="Production" project-id={{Project.Id}}" structure-template={{Project.ProjectSettings.SceneStructureTemplate}}"&gt;&lt;/element-structure&gt;
  &lt;/fieldset&gt;
  &lt;fieldset class="tab-pane fade in" id="AssetStructure"&gt;
        &lt;element-structure element-type="Asset" project-id="{{Project.Id}}"&gt;&lt;/element-structure&gt;
  &lt;/fieldset&gt;
  </code></pre>