How to create a dropdown instead of tab-heading for a tabset

Question

So I am creating a angularjs 1.4 and bootstrap 3 web app. Part of the web app has a tabset that allows the user to click on tabs and see different graphs. I would like to change the tab-headings to be a dropdown instead, where a user can see the available graphs on the drop down and when they click on an option, that option's graph will appear.

What I tried to do was hide the tab-headings and create a separate dropdown where I have an ng-click function that utilizes jquery selectors to select the specific tab and add the 'active' class to the element. This works but stays on the loading screen for the graph and never shows the content.

Any help or other ideas would be great!

$scope.openGraphTab = function(graph){
            selectedGraph = graph;
            var index = getSelectedGraphIndex(graph);
            $('.tab-pane').removeClass('active');
            var tabs = $('.tab-pane:nth-child(index)').addClass('active');
        }; 

^^This is the function that I call to attempt to open the tabs.

Answer 1

This was just bad design. I went ahead and rewrote all the code to have them included inside of divs and only show the divs that the user selects which contains the graph data.