Question: I have an array `badge = [{'name':'abc', 'flag': true}, {'name':'cde', 'flag': false}, {'name':'def', 'flag': true} ]`

used it with `ng-repeat` and dom is created on browser. Now i need to delete element having flag `false` from array but, keep the HTML (created by ng-repeat) entact in browser.

Answer: 
> 
> Use [**`filter`**](https://docs.angularjs.org/api/ng/filter/filter)
> 
> 
> 

```js
angular.module('myApp', []);

function HelloCntl($scope) {
  $scope.badge = [{
    'name': 'abc',
    'flag': true
  }, {
    'name': 'cde',
    'flag': false
  }, {
    'name': 'def',
    'flag': true
  }]
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div ng:app="myApp">
  <div ng-controller="HelloCntl">
    <ul>
      <li ng-repeat="b in badge | filter:{flag:true}">
        <span>{{b.name}}</span>
        <span>{{b.flag}}</span>
      </li>
    </ul>
  </div>
</div>
```
Use one time binding. So that when you change model then DOM will not be reflected again after first time load.

```
<ul>
      <li ng-repeat="b in ::badge">
        <span>{{b.name}}</span>
        <span>{{b.flag}}</span>
      </li>
</ul>

```

For disabling the deleted things, use **`ng-class`** with normal two way binding.

For one time binding please google, or refer [Do bindings nested inside of a lazy one-time ng-repeat binding bind just once?](https://stackoverflow.com/questions/23903389/do-bindings-nested-inside-of-a-lazy-one-time-ng-repeat-binding-bind-just-once)