Angularjs ui bootstrap - not working for dropdown

Question

So here is my controller code:

$scope.isopen = false;

Here is my template file (its in Jade)

div(ng-click="isopen = !isopen") {{ isopen }}

div.dropdown(is-open="isopen")
    div.dropdown-toggle Click me
    ul.dropdown-menu
        li Asdf

Therefore, when I click on a div that initially says false, the dropdown menu is simply not affected. What for? This is very frustrating.

The dropdown menu works great when I click on "Click me", but I want to switch it using is-open.

Thanks in advance.

Answer 1

You may have encountered the problem of inheriting areas. Try placing isopenin an object in an area and accessing this path.

$scope.store = {};
$scope.store.isopen = false;


div.dropdown(is-open="store.isopen")
    div.dropdown-toggle Click me
    ul.dropdown-menu
        li Asdf