Unit test collapse behaviour of a div element in Angular-JS

I have a simple form that I want to be shown on a button click. i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user. The first problem i am facing is: using this code

function AngularUI($scope, $window) {


    $scope.collapse = function (selector) {
        angular.element(selector).collapse();
    }
}  

and

<div class="ang-ui-test">
    <button ng-click="collapse('#collapsible')">
        using angular.element
    </button>

    <div id="collapsible" class="collapse">
        some thing in here ...... !
    </div>


    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
        simple collapsible
    </button>

    <div id="demo" class="collapse in">This one work properly</div>
</div> 

the second one that does not uses angular.element.collapse works properly.

The second problem is : how do I test the behavior mentioned above.

on the first button press, the one that uses angular.element if the div is hidden it is shown but, it does not hide the collapsible after it is shown. ( i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.

thanks in advance.