Angular JS and Bootstrap Together

I started a project using Angular JS and needed some nice widgets so I incorporated Bootstrap. I included the NavBar component from Bootstrap, only to realize that it was no good without the corresponding JavaScript bits that are needed to switch the highlight to the selected nav page. I needed to add code like this:

    $('ul.nav li a').click(function(e) {

        var $parent = $(this).parent();

        $parent.siblings().removeClass('active');

        $parent.addClass('active');

    });

I felt that this was not right. With such two popular frameworks, why did I have towrite code for such a basic task?

After a quick search, I found what seems to be the answer. There are two frameworks that combine the strength and cleanliness of Angular with the beauty of Bootstrap: Bootstrap UI and AngularStrap. The former seems to have more following but feature-wise they look similar. Both allow you to use Bootstrap components without the need to go around Angular declarative directives and write JQuery code. They provide Angular directives that wrap Bootstrap component so you can get the best of both worlds. 

For my needs, I will probably go with AngularStrap since they have a nav bar component whereas Bootstrap UI does not.