javascript - Input value is undefined even when ng-model is defined -

i have angularjs directive show or hide input labels. works fine when start empty input , start typing. when input pre-filled ng-model label should shown initially, , starting hidden. have checked value of input, , undefined. i'm sure there obvious reason/solution, cannot find it. plunker

angular:

var app = angular.module('plunker', []);  app.controller('mainctrl', function($scope) {   $scope.customer = {     name: "patrick"   }; });  app.directive('labeltoggle', function () {   return {     restrict: 'a',     link: function (scope, element, attr) {        var thislabel = element.find('label');       var thisinput = element.find('input');        scope.valuedefined = thisinput[0].value;        thisinput.on('keyup', function () {          if (this.value) {           thislabel.addclass('show-label');         } else {           thislabel.removeclass('show-label');         }          scope.valuedefined = thisinput[0].value;        });      }   }; }); 

html:

<div label-toggle class="input-wrap">   <label>customer</label>   <input type="text" name="customer" placeholder="customer" ng-model="customer.name"> </div>  <div>value? {{valuedefined}}</div> 

as side question came when writing plunker, why scope update happening 1 keypress behind?

way simplified solution use ng-class instead

http://plnkr.co/edit/aqyhwtzhilwru2yptscx?p=preview

  <label ng-class="{'show-label':customer.name}">customer</label> 

regarding why code isn't working, model hasn't updated when key down event occurs (doesn't work keyup either tried) if want know what's going on ng-model input want @ ngmodelcontroller see how can require ng-model , handle on when value updated or trigger changes if needed.

alternatively when want call function in controller when model changes use ng-change.