How to use collapse in a directive? - angularjs

Question

I have this part of code where second <tr> appears only on Edit click and a form appears which I'm displaying using directive.
<table class="table">
<tbody ng-repeat="Emp in Employees">
<tr>
...
<td>
<input type="button" class="btn btn-default" value="Edit" ng-click="isCollapsed = !isCollapsed" />
</td>
</tr>
<tr collapse="isCollapsed">
<td>
<div>
<employee-form></employee-form>
</div>
</td>
</tr>
</tbody>
</table>
Now I have a button in my employeeForm directive as well which when clicked should make this form disappear (isCollapsed=true). But somehow that is not working.
Markup for employee-form:
<form>
...
<button type="button" class="btn btn-default" value="Cancel" ng-click="isCollapsed = true" />
</form>
JS part for this is:
$scope.isCollapsed = true;
So what I want is on click of the Cancel button in the employeeForm the <tr> should disappear.

Answer 1

View in Plunker
I hope it may help you:..
HTML:
<div ng-app="myapp" ng-controller="myctrl" id="id01">
<table>
<tbody ng-repeat="emp in Employees">
<tr>
<td>
<p>{{emp}}<input type="button" value="edit" ng-click="setshowindex($index)"/></p>
</td>
</tr>
<tr ng-class="{'show':$index==showing,'hide':$index!==showing}">
<td>
<employee-form></employee-form>
</td>
</tr>
</tbody>
</table>
Script:
angular.module('myapp',[])
.controller('myctrl',function($scope){
//$scope.collapsed = true;
$scope.Employees = ['abc','xyz','klm'];
$scope.showing = -1;
$scope.setshowindex = function (i) {
$scope.showing = -1;
$scope.showing = i;
};
})
.directive('employeeForm',function(){
return {
restrict: 'E',
replace:true,
template: '<form><input type="text" ng-value="emp" /><button ng-click="setshowindex(-1)">Cancel</button></form>'
};
});
CSS:
tr.show{
display: table-row;
}
tr.hide{
display: none;
}