Angularjs With Bootstrap Tooltip

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.3.2/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/4.3.2/js/foundation.min.js"></script>
<div ng-app="myApp">
    <div ng-view></div>
    
    <script type="text/ng-template" id="view1.html">
        <div ng-controller="MyCtrl">
            <li ng-repeat="item in items" >
                <span data-tooltip class="has-tip" title="{{ item.tooltip }}">{{item.name}}</span>
            </li>
        </div>
    </script>
</div>

JavaScript

var myApp = angular.module("myApp", [])

.config(function($routeProvider){
    $routeProvider
    .when('/', { 
        controller: 'MyCtrl', 
        templateUrl: 'view1.html' 
    });
})

.controller('MyCtrl', function($scope) {
    $scope.items = [{ name: "item 01", tooltip: "This is item 01 tooltip!"},
                    { name: "item 02", tooltip: "This is item 02 tooltip!"},
                    { name: "item 03", tooltip: "This is item 03 tooltip!"},
                    { name: "item 04", tooltip: "This is item 04 tooltip!"},
                    { name: "item 05", tooltip: "This is item 05 tooltip!"} ];
})

.run(function($rootScope, $timeout) {
    $rootScope.$on('$viewContentLoaded', function () {
        console.log('loaded!');
        console.log($('.has-tip').length,'  Num tips');
        
        $timeout(function(){        
        $(document).foundation();
         console.log($('.has-tip').length,'  Num tips after timeout');   
        },300)
    });
});