javascript - angular custom directive two way binding issue -

i've seen examples online , answered questions here @ so, somehow, i'm not getting two-way binding on custom directive.

when change input value inside directive's template, ngmodel doesn't update on controller's scope.

here's have:

controller

$scope.tpcompl = "default value"; $scope.$watch('tpcompl', function(val) {     alert('value changed!'); }); 

directive

.directive("panmdautocomplete", function() {     return {         restrict: 'e',         scope: {             ngmodel: '=panmodel',             panlista: '=',             panlabel: '=',             panmaxlength: '=',             panflex: '='         },         templateurl: 'template.html',         link: function($scope, element, attrs){             var sugereitem = function(termo) {                 var valor = termo.touppercase().trim();                 var resultados = [];                 (var i=0;i<$scope.panlista.length;i++) {                     var item = $scope.panlista[i];                     if (item.id.touppercase().indexof(valor) !== -1) {                         resultados.push({label:item.id, value:item.id});                     }                 }                 return resultados;             }              $scope.autocomplete_options = {                     suggest: sugereitem             };         }     } }); 

template

<span mass-autocomplete>     <md-input-container ng-class="{'md-input-has-value': ngmodel}" flex="{{panflex}}" style="position:static;">         <label>{{panlabel}}</label>         <input type="text" ng-model="ngmodel" ng-attr-maxlength="{{panmaxlength ? panmaxlength : ''}}" mass-autocomplete-item="autocomplete_options" class="md-input">     </md-input-container> </span> 

and finally, html custom directive

<pan-md-autocomplete pan-lista="tiposcompl" pan-label="'complemento'" pan-maxlength="'8'" pan-flex="'25'" pan-model="tpcompl"></pan-md-autocomplete> 

i think problem controller varaible,once pass controller variable object instead of direct variable this,

  $scope.tpcompl = {                value :"default value"                     }; 

and in html use:

<pan-md-autocomplete pan-lista="tiposcompl" pan-label="'complemento'" pan-maxlength="'8'" pan-flex="'25'" pan-model="tpcompl.value"></pan-md-autocomplete> 

hope work.