Edit function is not properly working in angular JS - angularjs

Question

When I add any data I am getting values in text box instead of getting it in span.And also after the data gets added I am getting done button instead of getting Update button.Find my full code here:https://jsfiddle.net/GowthamG/jL5oza04/
Is there any error?
<script type="text/javascript">
var app=angular.module("mainapp",[]);
app.controller('mycontrol',function($scope){
$scope.filters=[];
$scope.add=function(filter){
$scope.filters.push(filter);
$scope.filter={};
};
$scope.update = function (index) {
$scope.editing = $scope.filters.indexOf(index);
};
<table border="2">
<tr>
<td>FirstName</td>
<td>LastName</td>
<td>Fees</td>
<td>E-Course</td>
</tr>
<tr ng-repeat="filter in filters track by $index">
<td><span ng-hide="update">{{filter.fname}}</span>
<input type="text" ng-show="update" ng-model="filter.fname">
</td>
<td><span ng-hide="update">{{filter.lname}}</span>
<input type="text" ng-show="update" ng-model="filter.lname">
</td>
<td><span ng-hide="update">{{filter.ffees}}</span>
<input type="number" ng-show="update" ng-model="filter.ffees">
</td>
<td><span ng-hide="update">{{filter.eroll}}</span>
<input type="text" ng-show="update" ng-model="filter.eroll">
</td>
<td>
<button ng-hide="update" ng-click="update = true; update($index)">Update</button>
<button ng-show="update" ng-click="update = false">Done</button>
</td>
<td>
<button ng-click="remove($index)">Remove</button>
</td>
</tr>
</table>

Answer 1

You have to initialize the value of $scope.update in your add functionality to hide the inputs. Now the values will be shown in a span with update button.
$scope.add=function(filter){
$scope.filters.push(filter);
$scope.update=false;
};
Working Demo: https://jsfiddle.net/kz8uLg10/2/