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.


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:

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

.directive('maketab',function() {
        return function(scope, elm, attrs) {
                show: function(event, ui) {

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

<div id="mytab" maketab>



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.