How to use collapse in a directive?

Issue

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.

Solution

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;
        }

Answered By - mia