Show and hide a row dynamically on a button click using directive - AngularJS

I've a table with ng-repeat on tr.

<table class="my-content">
    <thead>
        <tr class="my_head">
            <th>ID
            </th>
            <th>One
            </th>
            <th>Button
            </th>
            </tr>
    </thead>

    <tbody>
            <tr
                ng-repeat="item in items"
                class="my_row">

                    <td>{{item.Id}}</td>
                    <td>{{item.One}}</td>
                    <td><a ng-click="getValue(item.Id)">
                        <img    src="images/btn/btn_info.png"/></a>
                    </td>                           

            </tr>

    </tbody>

I'm trying to add a row dynamically using the below directive.

    myDir.directive("myRow", function ($compile) {
    var el = angular.element('<tr><td colspan="3">'+ $('#myDiv').html() +'</td></tr>');

    return {
        restrict: 'C',
        link: function( scope, element, attrs ) {
            element.bind('click', function() {             
                $compile(el)(scope);
                element.after(el);                
            });
        }    
    };
});

The problem here is,on clicking the row, myDiv is shown below on that row , but I want it to be shown only when the button is clicked not when the clicked on any part of the row.

Also I'm trying to hide the div when the button is clicked again. How do I achieve that?

Added to these I would like to pass the item ID back to the directive because the Div I'm displaying below the row would depend on the ID.