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>
```
You could put two ng-repeats next to each other and have the second one initially empty and your first one as you show it. Then you can delete it from the first array and put it in the second one. 

This way you can remove the element, but still keep it in the DOM.