AngularJS 1.2.x Conditional ng-click

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.output = [];
  $scope.items = [{name: 'foo', click: false}, {name: 'bar', click: true}];
  $scope.write = function(line, event) {
    console.log(event);
    $scope.output.push(line += ' | Event: ' + event);
  };
});

app.directive('myClick', function() {
  return {
    restrict: 'A',
    scope: { myClick: '&' },
    link: function(scope, element, attrs) {
      attrs.$observe('disable', function(val) {
        if (val == 'true' || val == 1) {
          element.off('click');
        } else {
          element.on('click', function(e) {
            scope.$apply(function() {
              scope.myClick({'$event': e});
            });
          });
        }
      });
    }
  };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <label>Foo click enabled<input type="checkbox" ng-model="items[0].click"></label>
    <label>Bar click enabled<input type="checkbox" ng-model="items[1].click"></label><br>
    <button ng-repeat="item in items" my-click="write('clicked ' + item.name + '!', $event)" disable="{{!item.click}}">{{item.name}} Click: {{item.click}}</button>
    

      <ul>
        <li ng-repeat="line in output track by $index">{{$index}}: {{line}}</li>
      </ul>
   
  </body>

</html>

/* Put your css in here */