Clear x icon focus out issue using angularjs

Question

I need x icon for removing input field values 1. When user type anything "x" icon will be displayed

2. If no values available in input box x will be hide

3. When values available in input box and focus out the input box we need to hide the x icon and focus in we need to show x icon again.

When we add ng-blur="count = !count" (Focus out i need to hide x if input has values) in input box my expectation will be failed.

CODE:

<span ng-show="name && count" ng-click="name=''" style="position: absolute;left: 203px;cursor;pointer;">X</span>
Name: <input ng-model="name" ng-focus="count = !count" ng-init="count=false" >
<p>{{count}}</p>

Any one please helps me how to fix this issue

Answer 1

There's something wrong with jsfiddle. The snippet below (copy pasted from your question) works fine.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name="";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<span ng-show="name && count" ng-click="name=''" style="position: absolute;left: 203px;">X</span>

Name: <input ng-model="name" ng-focus="count = !count" ng-init="count=false" ng-blur="count = !count">

<p>{{count}}</p>
</div>