AngularJS：无法获取$ scope值jquery选项卡，但在外面我得到了值

Question

我正在使用jQuery Tabs，但无法在标签内获取$ scope变量数据。以下是来自视图的代码：

     <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
     <li ng-repeat="event_name in myEvents">
         <a ng-click="selectedEventDetail(event_name._id)" href="#dropdownEventDetail" role="tab" id="dropdownEventDetail-tab" data-toggle="tab" aria-controls="dropdownm" aria-expanded="true">{{event_name.name}}</a>
     </li>
     <li class=""><a href="#createNewEvent" role="tab" id="createNewEvent-tab" data-toggle="tab" aria-controls="dropdowns" aria-expanded="false">Create New</a></li>
     </ul>
<!-- Tab Content -->
     <div class="tab-content">
                  HTML {{singleEvent}}    //prints data over here
                  <!-- Dynamic Event Detail Section starts here -->
<div class="tab-pane fade in" role="tabpanel" id="dropdownEventDetail" aria-labelledby="dropdownEventDetail-tab">
    <div class="col-sm-12">
        <div id="EventDetail-Wizard">
    <h3>Keyboard</h3>
    <section> 
        {{$parent.singleEvent}} val {{singleEvent}}  // does not print 
    </section>
    </div>
    </div>
    </div></div>

以下是来自控制器的代码：

$scope.selectedEventDetail = function(event_id){
        Events.findById({'_id':event_id}).then(function(response){
            console.log(response) // returns object
            $scope.singleEvent=response.data // returns object
        })
    }

如何在选项卡中使用我的$ scope变量数据？