Q:

ng-repeat data switch based on click

Hello I am new in angular js
Is it possible ng-repeat data change on click without dom change?
see Example 
In this example - When the click on 'names' tab then show names list from 'names' array , same as when the click on 'ids' tab then content replace with ids list
Is it possible manage from controller with same dom element?
<div class="select"><span class="active">Names</span> <span>ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="name in names">{{name.name}}</li>
</ul>

var myApp = angular.module('myApp', []);

myApp.controller('testController', function ($scope) {
    $scope.names = [
        {name : 'nameOne'},
        {name : 'nameTwo'},
        {name : 'nameThree'},
        {name : 'nameFour'},
        {name : 'nameFive'}
    ];

       $scope.IDs = [
        {id : 'idOne'},
        {id : 'idTwo'},
        {id : 'idThree'},
        {id : 'idFour'},
        {id : 'idFive'}
    ];    

});

Thanks

A:

You can try something like this 
<div class="select"><span class="active" ng-click="changeToName()">Names</span> <span ng-click="changeToID()">ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="name in myRepeat">{{ (name.name || name.id) }}</li>
</ul>

in the controller
  //default empty - but you could set it to a default like $scope.myRepeat = $scope.names;
  $scope.myRepeat = [];

 $scope.changeToName = function(){
     $scope.myRepeat = $scope.names;
 };

   $scope.changeToID = function(){
     $scope.myRepeat = $scope.IDs;
 };

I just placed a different scope variable to the ng-repeat the data between $scope.myRepeat, which you can switch the data inside with some click functions. You can default it to having $scope.names as it's value, or an empty array, depends how you want it to be used.
FIDDLE - http://jsfiddle.net/8s4afddv/2/

