Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-controller="MyCtrl">
  <div>
      <h3 ng-click="orderBy('name')">
       Name
      </h3>
      <p ng-repeat="item in data">
        <input type="text" ng-model="item.name" ng-if="edit" />
        <span ng-if="!edit">{{ item.name }}</span>
      </p>
  </div>
  <button ng-click="toggleEditMode()">
      Toggle edit mode
  </button>
</div>

CSS

h3 {
  font-weight:bold;
  margin-bottom:3px;
}

JavaScript

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

myApp.controller('MyCtrl', function ($scope, orderByFilter) {
 
    $scope.edit = false;
    $scope.data =  [{
    		name: 'Frank'
    },{
    		name: 'Peter'
    },{
    		name: 'Basti'
    },{
    		name: 'Sven'
    },{
    		name: 'Franky'
    },{
    		name: 'Sveny'
    },{
    		name: 'bob'
    }];
    
    $scope.order = {
    		column: '',
        revers: false
    }
    
    $scope.toggleEditMode = function () {
       $scope.edit = !$scope.edit;
    }
    
    $scope.orderBy = function (column) {
    
      if (!$scope.edit) {
        $scope.order.column = column;
        $scope.order.reverse = !$scope.order.reverse; //toggle revers
        $scope.data = orderByFilter($scope.data, $scope.order.column, $scope.order.reverse);
      }
    }
});