angular component directives and templateurl, different response to outside controller

Question

I am getting some behavior that was unexpected with my first foray into directives.

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.

my directive is as follows:

    (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',
            };
        });

})();

Inside my template url I have this select which im expecting to call the watcher..

<select class="form-control"
   ng-options="d for d in ProductionCategoryOptions" ng-model="NewElementType"></select>

Im loading this directive twice as separate components ( and not intending to share any values )

<fieldset class="tab-pane fade in" id="ProductionStructure">
     <element-structure element-type="Production" project-id={{Project.Id}}" structure-template={{Project.ProjectSettings.SceneStructureTemplate}}"></element-structure>
</fieldset>
<fieldset class="tab-pane fade in" id="AssetStructure">
      <element-structure element-type="Asset" project-id="{{Project.Id}}"></element-structure>
</fieldset>

Answer 1

So I've got the directive working as intended. It seems as though there was a few fundamental quirks in the angular docs that hadn't quite clicked yet, and more than likely most that im still not.

To get it to work properly i needed to pull in an ngmodel into the directive and 2 way bind it ( '=' ). Prior to doing this i was creating the 'model' inside the directives controller, which then wasnt forcing the view to update ( or even calling the watcher - which im guessing is a scope issue ). So instead ive created the model in the outside controller, and bound the directive to that which seems to work now as i intended.

In my outside controller i create the object that is to bound to my directive:

$scope.ProductionStructureModel = {
        Elements: null,
        NewElement: {
            Type: null,
            Path: null,
            Name: null,
            Length: null,
            Audio: null,
            Parent: null,
        }
    };

my directive then references this as follows:

return {
            restrict: 'EA',
            requires: '^^ngModel',
            scope: {
                elementType: '@',
                projectId: '@',
                structureTemplate: '@',
                Model: '=ngModel',
            },
            controller: structureController,
            templateUrl: '/partials/structure.html',
            link: function (scope, element, attrs) {
                scope.$watch('Model', function (val) {
                    alert(val);
                    console.log(val);
                });
            }
        };

the html that calls my directive:

<element-structure element-type="Production" project-id="{{Project.Id}}"
                                       structure-template="{{Project.ProjectSettings.SceneStructureTemplate}}"
                                       ng-model="ProductionStructureModel"
                                       ></element-structure>

One thing i havent figured out yet however, is that even though its adjusting the model as expected and updating the view - it still isnt calling the watcher.. Would anyone be able to shed some light on this for me?