I have a directive that creates and manages a bootstrap modal dialog.

Currently I have the directive watch a boolean held on the controller. The controller can then set this to true to have the modal dialog display.

This seems kinda messy. Is there a better way?

The directive in action:

```
<modal trigger="shouldDisplayModal" title="{{modalTitle}}" 
message="{{modalMessage}}" positiveclick="okClicked()" 
negativeclick="closed()" 
positivelabel="Ok" negativelabel="Cancel"/>

```

The watch in the controller of the directive:

```
// watch the trigger value. expected to be boolean
$scope.$watch('trigger',function(newValue, oldValue){                
    if (newValue)
    {
        // enable any disabled buttons 
        modalElem.find('button').removeClass('disabled');
        // show the dialog
        modalElem.modal('show');
    }
    else
    {
        // hide the dialog
        modalElem.modal('hide');
    }
});

```

Here is a working example: <http://jsfiddle.net/rabidgremlin/Ya96z/31/>

**UPDATE**: Here is a fixed up example that corrects some issues with multiple directives on a page: <http://jsfiddle.net/rabidgremlin/sjbCJ/1/>