title: How can I force ng-click to take precedence over an ng-blur event?
body: <p>When I click the save button it triggers an ng-blur event, how can I make the buttons ng-click event to trigger instead? I still want the ng-blur event to trigger if I click outsida the button or input field.</p>
  
  <p><a href="http://jsfiddle.net/tidelipop/wyjdT/">http://jsfiddle.net/tidelipop/wyjdT/</a></p>
  
  <pre><code>angular.module('MyApp', [])
  
  .filter("placeholder", function(){
      return function (text, length, end) {
          //console.log(typeof text, text, length);
          if(typeof text === 'undefined' || text == ''){
              text = 'Click to edit...';
          }
          return text;
      };
  })
  
  .directive("inlineEdit", function($compile, $q){
      return {
          restrict: "A",
          replace: true,
          template: function(tElement, tAttrs){
              var modelStr = tAttrs.inlineEdit, optionsStr = tAttrs.options, modelXtra = '', editElStr = '';
              if(tAttrs.type === 'selectbox'){
                  modelXtra = '.value';
                  editElStr = '&lt;select ng-show="editMode" ng-blur="endEdit(\''+modelStr+'\')" ng-model="'+modelStr+'" ng-options="a.value for a in '+optionsStr+'"&gt;&lt;/select&gt;';
              }else if(tAttrs.type === 'textarea'){
                  editElStr = '&lt;textarea ng-show="editMode" ng-blur="endEdit(\''+modelStr+'\')" ng-model="'+modelStr+'"&gt;&lt;/textarea&gt;';
              }else{
                  editElStr = '&lt;input type="text" ng-show="editMode" ng-blur="endEdit(\''+modelStr+'\')" ng-model="'+modelStr+'" /&gt;';
              }
              return '&lt;div class="body"&gt;'+
                         '&lt;span ng-hide="editMode" ng-click="startEdit(\''+modelStr+'\', \''+optionsStr+'\')" ng-bind="'+modelStr+modelXtra+' | placeholder"&gt;&lt;/span&gt;'+
                         editElStr+'&lt;button ng-show="editMode" ng-click="save()"&gt;save&lt;/button&gt;'+
                     '&lt;/div&gt;';
          },
          scope: true,
          controller: function($scope){
              $scope.editMode = false;
              $scope.save = function(){
                  console.log("Saving...");
                  $scope.editMode = false;
              };
              $scope.startEdit = function(modelStr, optionsStr){
                  console.log("Start edit mode...");
                  // Store original value, to be restored if not saving...
                  $scope.origValue = $scope.$eval(modelStr);
                  // If selectbox and no initial value, do init to first option
                  if(typeof $scope.origValue === 'object' &amp;&amp; typeof $scope.origValue.value !== 'string'){
                      $scope.$eval(modelStr+'='+optionsStr+'[0]');
                  }
                  // Turn on edit mode
                  $scope.editMode = true;
              };
              $scope.endEdit = function(modelStr){
                  console.log("End edit mode...");
                  // Restore original value
                  $scope.$eval(modelStr+'=origValue');
                  // Turn off edit mode
                  $scope.editMode = false;
              };
          }
      }
  })
  
  
  .controller("UserAdminCtrl", function($scope){
      $scope.options = {};
      $scope.options.cars = [
          { "key": 0, "value": "Audi" },
          { "key": 1, "value": "BMW" },
          { "key": 2, "value": "Volvo" }
      ];
      $scope.data_copy = {
          user: {
              user_id: 'sevaxahe',
              comment: '',
              my_car: {}
          }
      };
  
  });
  </code></pre>