Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div ng-controller="MyCtrl">
    <div class="dropdown" dropdown-state="vars.isOpen">
        <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#" data-ng-click="isMenuOpen()">Dropdown <b class="caret"></b></a>
        <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>
    
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    
    Open: {{ vars.isOpen }}
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', ['$scope', function($scope) {
    $scope.vars = {};
    $scope.vars.isOpen = false;
}]);

myApp.directive('dropdownState', function($timeout) {
    return {
        restrict: 'A',
        scope: {
            openState: '=dropdownState'
        },
        link: function (scope, element, attr) {
            attr.$observe('class', function() {
                console.log(arguments);
            });
        }
    };
});

//myApp.factory('myService', function() {});