Question: I want to disable my image when I click the toggle button. I think I made the code right but it doesn't work fine. When the toggle is set to true then I click the image it should alert 'test' and when the toggle is set to false then the image is disabled so no alert will show.

But my problem is either true or false when I click the button it's alert test. What is wrong? 

```js
var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
    $scope.isEnabled=true; 
    $scope.test = function() {
      alert('test');
    }
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="main" ng-controller="DemoCtrl">
    <h1>Image disable</h1>  
    <img src="http://s7.postimg.org/w7w78jgjf/check_box_1.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="test()"></img>
    <br/>
    <button title="Toggle" ng-click="isEnabled = !isEnabled">toggle</button>
    {{isEnabled}}
  </body>
```

Answer: 
`ng-click` will be triggered even there is a `ng-disabled` for img elements.

A simple solution is to change your ng-click to check the parameter

```
<img src="http://s7.postimg.org/w7w78jgjf/check_box_1.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="!isEnabled || test()"></img>

```
Do this in controller.You don't have add anything new in your Html

```
var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
    $scope.isEnabled=true; 
    $scope.test = function() {
      if(!$scope.isEnabled) return;
      alert('test');
    }
});

```