Bootstrap Tabs do not work with AngularJS/ Angular-Form-Builder

In my project I use Bootstrap Tabs with AngularJS and angular-form-builder:

            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#project" aria-controls="projekt" role="tab" data-toggle="tab">Projekt</a></li>
                <li role="presentation"><a href="#project2" aria-controls="podglad" role="tab" data-toggle="tab">Podgląd</a></li>
                <li role="presentation"><a href="#json" aria-controls="json" role="tab" data-toggle="tab">Json</a></li>
            </ul>

           <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="project">
           ...
           ...

Whenever I try to move between tabs I recieve an error

Uncaught TypeError: $(...).tab is not a function(anonymous function) @ VM4062:4b.event.dispatch @ angular-file-upload.js:1331b.event.add.v.handle @ angular-file-upload.js:1331triggerMouseEvent @ angular-file-upload.js:1331tapClick @ angular-file-upload.js:1331tapMouseUp @ angular-file-upload.js:1331

Of course I didn't forget about handling the tabs:

 $('.nav-tabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})

I think its also worth mentioning that my application has 3 levels of nested views(via UI - Router)

Has anyone stumbled upon similar problem in the past? All my libraries are properly loaded within the project (I do believe in correct order, other parts of the application work as expected to).

Kind Regards!