Question: I do not know why I can not remove the value by clicking on the remove-icon in the input field.

```
          <i ng-hide="search" class="glyphicon glyphicon-filter"></i>
          <i ng-show="search" ng-click="search=null" class="glyphicon glyphicon-remove"></i>              
          <input ng-model="search" type="text" class="form-control" placeholder="Filter any..." />       
         <button ng-click="search=null"> remove value</button>

```

By using an button with same code it is possible.

Whats wrong in my code and how can I use the glyphicon for removing input value?

My code on [PLNKR](http://plnkr.co/edit/VapFqZcqjnxqf5KlQscP?p=preview)

Answer: 
Just remove [`pointer-events: none;`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) from `.glyphicon` icons:

```
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
}

```

Right now you are basically disabling click interaction with icons, that's why click doesn't work.

### Demo: <http://plnkr.co/edit/YaWt5UdSjvUmiZZ2QH5v?p=preview>
Nothing wrong is just that your `glyph click` is not possible cause input is overflowing it

check it works

<http://plnkr.co/edit/yV0O9Mwr0h8uhMg1MQLa?p=preview>

You can use your code and just add some z-index to the glyph ;) so it goes 1 layer up to the input and you can click it