DOM in jQuery UI and AngularJS UI Router

As MonkeyVoodoo pointed out, there is a project for using Twitter Bootstrap with Angular. It is well maintained and the work is already done for you.

If you must use jQuery UI, you will have to create the directives yourself and maintain them yourself. Each one is not that hard, but there are a lot of widgets with a lot of options in jQuery UI.

The reason directives are needed for this is do to how the DOM is replaced when the routes change. It replaces the DOM with what is cached directly from the server, not the rendered version of what was removed when the route was last viewed. This means that each time the route changes you will need to run the jQuery UI functions to init the jQuery UI widgets.

Directives come into play here as they will automatically run whenever the new DOM is compiled. You can set up directives to look for your elements you want to "jQuery UI-ify". In your example, button sets, it has the markup of:

<div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div> 

if you change these to:

<div jq-ui-buttonset>
    <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>

and create a directive to apply the .buttonset() function like this:

myApp.directive('jqUiButtonset',function(){
    return {
        restrict: "A",
        link: function(elm){
            $(elm[0]).buttonset();
        }
    }
});

This will work and is very basic example. You would have to extend it to allow for specific configurations to be passed to the .buttonset() call. And as you can see, this only works for .buttonset(); you would have to create one for each thing that you want to use, and jQuery UI has a lot of things you can use.