angularjs - How do I access and update ng-model in controller? -

so have angular directive defined:

angular.module('photosynthesysapp') .directive('taglist', function(){   return {     template: '<div class="tag-form"> <label> labels </label>'+  '<button class="btn-xsmall" ng-click="clicked = !clicked">+</button>' + '<div ng-show="clicked">'+   '<input type="text" ng-model="newtag">     '+   '<button ng-click="vm.addtag()"> add </button>' +   '</div>'+ '<ul>'+   '<div ng-repeat="tag in vm.taglistfromdatabase">' +   '<li>{{tag}}</li>' + '</div>'+ '</ul>'+ '</div>',  controller: taggercontroller, controlleras: "vm", restrict: "e"   } });  function taggercontroller() {   this.taglistfromdatabase = ["bridges","arches","roads","towers"];   this.clicked="false";   this.addtag = function(){     this.taglistfromdatabase.push(this.newtag);     console.log(this.newtag);   }; } 

console.log gives me undefined, doesn't print anything. don't understand why shouldn't.

also, i'm using template because couldn't figure out how templateurl, can figure out later guess.

you trying access newtag property bound controller (vm), in template bind ngmodel scope object, not controller.

correct code be:

<input type="text" ng-model="vm.newtag"> 

note, vm.newtag binds model controller, while newtag alone binds scope.