Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<h3>Here we should have only two collumns and the content of the id collumn depends on the 'status' of each elem</h3>


<div ng-controller="MyCtrl">
  <table class="table">
    <thead>
    <tr>
        <th>Name</th>
        <th>Id</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="elem in collection">
            <div ng-show="elem.status === 'NORMAL'">
                <td>{{elem.name}}</td>
                <td>{{elem.id}}</td>
            </div>
            <div ng-show="elem.status === 'CLEANING'">
                <td>{{elem.name}}</td>
                <td>~</td>
            </div>
    </tr>
    </tbody>
</table>

</div>

JavaScript

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

function MyCtrl($scope) {
    $scope.collection = [
        {name: 'A', id: 'oj3ng3o4', status: 'NORMAL'},
        {name: 'B', id: 'ecvref22', status: 'CLEANING'},
        {name: 'C', id: 'fr34f34r', status: 'NORMAL'}
    ];
}