Directive two way binding watch property

Question

I'm trying to use directives in my angularjs app, it's the first i'm trying to apply, so i'm not sure if its right.

The thing is that i want to wrap the ui-select directive into another directive and then i want to watch the selec if a new value has been selected. I'm able to populate the select but i don't know why it doesn't trigger the watch... here is the controller:

.controller('IngredientesDatosGeneralesController' ,['$scope', 'PrivateAlergenosUtilsService', 
                                                     'PrivateRestauranteService', 'PrivateIngredienteService',
                                                     function($scope, PrivateAlergenosUtilsService, PrivateRestauranteService,
                                                             PrivateIngredienteService){

    var _this = this;
    _this.PrivateIngredienteService = PrivateIngredienteService;

    _this.proveedorSeleccionado = null;

    _this.proveedores = [];

    PrivateRestauranteService.getProveedores().then(

            function(proveedores){

                _this.proveedores = proveedores;
            },

            function(error){
                _this.proveedores = [];
            }
    );

    $scope.$watch('cntrl.proveedorSeleccionado', function(newValue,oldValue){
          if (newValue && newValue!=oldValue){
              _this.PrivateIngredienteService.getIngregienteDTO().id = _this.proveedorSeleccionado.id;
          }
    }, true);
}]);

The following is the directive:

.directive('comboDirective', [
                                       function(){
    return {

        restrict : 'E',
        templateUrl: 'resources/js/private/views/utils/combo/combo.html',
        scope : {
            seleccionado : '=',
            elementos : '=',
            descripcion : '@'
        }
    }}]);

The combo.html:

    <div class="col-xs">
    <label translate>{{descripcion}}</label>
</div>
<div class="col-xs">
    <div class="selectStyle">
        <ui-select ng-model="seleccionado" theme="bootstrap" register-custom-form-control disable-validation-message="" required>
            <ui-select-match placeholder="{{'input.seleccionar' | translate}}">{{$select.selected.descripcion}}</ui-select-match>
            <ui-select-choices repeat="elemento in elementos | filter: $select.search">
              <div ng-bind-html="elemento.descripcion | highlight: $select.search"></div>
            </ui-select-choices>
           </ui-select>
           <i class="fa fa-chevron-down"></i>
    </div>
</div>

And finally this is how i call the directive:

<div ng-controller="IngredientesDatosGeneralesController as cntrl">
    <combo-directive 
        seleccionado="cntrl.proveedorSeleccionado" 
        descripcion="formulario.proveedor"
        elementos="cntrl.proveedores">
    </combo-directive>
</div>

Thanks in advance

Answer 1

I found what was happening... i don't know why but if i put this config in the directive and using the 'cntrl.' prefix before the "seleccionado" and "elementos" values in the HTML, it works properly.

'use strict';

angular.module("private.directives")

    .directive('comboDirective', [
                                           function(){

        return {

            restrict : 'E',
            templateUrl: 'resources/js/private/views/utils/combo/combo.html',
            scope : {
                seleccionado : '=',
                elementos : '=',
                descripcion : '@'
            },
            controller : ['$scope', function ($scope) {

            }],
            controllerAs : 'cntrl',
            bindToController: true
        }
}]);