How to call jQuery properly from an angular controller

I'm trying to use jQuery-UI tabs with angular and thus hooking them up in angular.

See the example here

Problem is that calling jQuery("#tabs").tabs(); in the controller seems to hook up "half" of what's needed to "tabbify" something.

Ideas?

You should not be doing DOM manipulation in your controller - at all. Rather, you should use directives.

I have been developing a set of directives for my own use: https://github.com/ganarajpr/Angular-UI-Components

The philosophy is to just drop this simple pieces of code in the directives file:

.directive('maketab',function() {
        return function(scope, elm, attrs) {
            elm.tabs({
                show: function(event, ui) {
                        scope.$broadcast("tabChanged",ui);
                }
            });
        };
    })

Then, in the div which you would like to convert into a tab:

<div id="mytab" maketab>

<ul>
....
</ul>

<div>...</div>
...
</div>

Note that the div and its child structures should conform to what JQuery UI asks it to be.

For a more robust example and more components, check out the github repo.