AngularJS - Click to Edit Directive (Save/Edit Buttons)

HTML

<div ng-app="searchDemo" ng-controller="LocationFormCtrl">
    <div>
        <input type="text" class="clearable magnifineglass" ng-click="search()"/>
        <!--<i class="glyphicon glyphicon-refresh spinning"></i>-->
            {{ outputText }}
        </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="https://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script> <style> body {
    font-family:"HelveticNeue", sans-serif;
    font-size: 14px;
    padding: 20px;
}
h2 {
    color: #999;
    margin-top: 0;
}
.field {
    margin-bottom: 1em;
}
.click-to-edit {
    display: inline-block;
}
input {
    display: initial !important;
    width: auto !important;
    border: 1px solid #999;
    padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
}
.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}
@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }
    to {
        transform: scale(1) rotate(360deg);
    }
}
@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.magnifineglass {
    background:url('http://image.flaticon.com/icons/png/128/34/34202.png') no-repeat right center;
    background-size: 15px 15px;
}
.loading {
    background:url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat right center;
    background-size: 15px 15px;
}

i {
  padding: 15px;
  margin-left: -35px;
}

JavaScript

angular.module("searchDemo", [])

    .controller("LocationFormCtrl", function ($scope, $timeout) {
    $scope.outputText = "Waiting...";
    $scope.test = "false";
        // Do the idle (magnifineglass) function here

    $scope.search = function () {
        $scope.test = "true";
 				//$(".clearable").removeClass('magnifineglass'); 
 				//$(".clearable").addClass('loading'); 
        $scope.outputText = "Searching...";
        // Do the search function here
        
        $timeout(function(){
            $scope.outputText = "Done.";
  // /////
  // CLEARABLE INPUT
  function tog(v){return v?'addClass':'removeClass';} 
  $(document).on('input', '.clearable', function(){
    $(this).removeClass('magnifineglass');
    $(this)[tog(this.value)]('x');
  }).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');   
  }).on('touchstart click', '.onX', function( ev ){
    $(this).addClass('magnifineglass');
    ev.preventDefault();
    $(this).removeClass('x onX').val('').change();
  });
        }, 2000);
    }

});
$(document).click(function(){
 $(this).addClass('magnifineglass');
    ev.preventDefault();
    $(this).removeClass('x onX').val('').change();
});