Click on a link and open appropriate tab

Question

I am experimenting with bootstrap, angularjs. So I pushed nav-tabs inside modal-window and open this modal by a link's click. But I want to open appropriate tab straight on click. If i click on travel, I want to get to the travel tab etc. What I should use to solve this problem? Maybe I need to simulate click or something like this? http://jsfiddle.net/3kgbG/1056/

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                <div class="hobbies">
                    hobbies & interests
                </div>
                <div class="row padding-top group-icons">

                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                        <a href="#" data-toggle="modal" data-target="#myModal">
                            football
                        </a>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">

                        <a href="#" data-toggle="modal" data-target="#myModal">
                            travel
                        </a>

                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                        <a href="#" data-toggle="modal" data-target="#myModal">
                            history
                        </a>
                    </div>
                </div>
            </div> <!--popUp container-->

 <!-- Modal --> 

<div id="myModal" class="modal fade popUp" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="h2-style">My Hobbies</h2>
                    <hr class="hr_line"/>
                </div>
                <div class="modal-body">
                    <div>

                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#bartending" aria-controls="bartending" role="tab"
                                                                      data-toggle="tab">bartending</a></li>
                            <li role="presentation"><a href="#football" aria-controls="football" role="tab"
                                                       data-toggle="tab">football</a>
                            </li>
                            <li role="presentation"><a href="#travel" aria-controls="travel" role="tab"
                                                       data-toggle="tab">travel</a>
                            </li>
                            <li role="presentation"><a href="#history" aria-controls="history" role="tab"
                                                       data-toggle="tab">history</a>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content" ng-controller="HobbiesCrtl">
                            <div role="tabpanel" class="tab-pane fade" id="{{hobby.id}}" ng-repeat="hobby in hobbies">
                                <div class="container padding-top">
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                                                <img src="{{hobby.img}}" alt=""
                                                     style="width: 70%; margin: 0 auto; display: block">
                                            </div>
                                            <div class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
                                                {{hobby.description}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
    <!--popUp container-->

 <!--angular Ctrl--> 

    myApp.controller('HobbiesCrtl', function($scope, $http){
        $scope.title = "my hobbies";
        $http.get(window.location + 'js/hobbies.json').success(function(data) {
            $scope.hobbies = data;
        })
    } );

 this is my json file: 

  {
    "id": "football",
    "img": "http://images.fastcompany.com/upload/adidas-jabulani-ball.jpg",
    "description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of  is the most popular in the"
  },

  {
    "id": "travel",
    "img": "http://thumbs.dreamstime.com/z/travelling-world-21448211.jpg",
    "description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of  is the most popular in the"
  },

Answer 1

As soon as you are using the same controller for the view and modal window, so they are sharing the same $scope.

You can create scope variable like activeTab, and set in on click:

<a href="#" data-toggle="modal" ng-click="activeTab == 'football'" data-target="#myModal">
                            football
                        </a>

In your modal window just toggle active class if scope variable activeTab has neccessary value:

<li role="presentation" ng-class="{active: activeTab == 'football'}"><a href="#football" aria-controls="football" role="tab"
                                                       data-toggle="tab">football</a>