How to implement an ng-change for a custom directive

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="appCtrl">
    <my-directive ng-model="foo" items=items ng-change="bar(foo)"></my-directive>
    
    <h1>See what happens</h1>
    <div>foo current value : {{foo}}</div>
    <div>value of foo when bar is called: {{aux}} </div>
  </body>
</html>

// Code goes here
var app = angular.module("myApp", []);

app.directive("myDirective", function(){
  return {
    restrict: "E",
    template : '<h1>Click to choose!</h1><div class="clkm" ng-repeat="item in items" ng-click="updateModel(item)">{{item}}</div>',
    require: 'ngModel',
    scope : {
      items : "="
    },
    link : function(scope, element, attrs, ctrl){
      scope.updateModel = function(item)
      {
        ctrl.$setViewValue(item);
      }
      ctrl.$viewChangeListeners.push(function() {
        scope.$eval(attrs.ngChange);
      });
    }
  };
});

app.controller("appCtrl", function($scope){ 
  $scope.items = [1,2,3,4,5,6];
  $scope.bar = function(foo)  {
    $scope.aux = foo;
  }
  
});

/* Styles go here */

.clkm
{
  border : solid #999 2px;
  cursor : pointer;
  text-align : center;
  margin-bottom : 3px;
  width : 50px;
}