自定义Youtube角度指令不起作用

Question

我正在尝试使用Angular Youtube Embed。我已将youtube视频ID存储在我的数据库中并尝试调用它，如下所示

<div class="row" ng-show="videos.length > 0">
            <div class="col-md-4 img-portfolio" ng-repeat="data in videos">
                <a href="portfolio-item.html">
                        <youtube-video video-id="{data.videoYTID}}"></youtube-video>                
                </a>
                <h3>
                    <a href="portfolio-item.html">{{data.videoTitle}}</a>
                </h3>
                <p>{{data.videoYTID}}</p>
                <p>{{data.category}}</p>
            </div>
        </div>

我的app.js就是这个

app.controller('listCtrl', function ($scope, services) {
services.getVideos().then(function(data){
    $scope.videos = data.data;

});
});

您可以查看对{​​{3}}

的访问权限

但它似乎不起作用。它只是显示如下所示的对象。

当我通过将id直接传递给$scope变量来正常尝试时，它正在运行。如下所示

app.controller('listCtrl', function ($scope, services) {
services.getVideos().then(function(data){
    $scope.videos = data.data;
    $scope.videos2  = 'smSrt93dtf'  
});
});


<div class="row" ng-show="videos.length > 0">
                <div class="col-md-4 img-portfolio" ng-repeat="data in videos">
                    <a href="portfolio-item.html">
                            <youtube-video video-id="smSrt93dtf"></youtube-video>                
                    </a>
                    <h3>
                        <a href="portfolio-item.html">{{data.videoTitle}}</a>
                    </h3>
                    <p>{{data.videoYTID}}</p>
                    <p>{{data.category}}</p>
                </div>
            </div>

更新

JSON DATA：

[{"videoNumber":"170","videoTitle":"Venkateshwaran Selvaraj","videoYTID":"sMKoNBRZM1M","category":"22 Nothing"},{"videoNumber":"168","videoTitle":"American Souvenirs","videoYTID":"sMKoNBRZM1M","category":"149 Spinnaker Dr."},{"videoNumber":"167","videoTitle":"Herkku Gifts","videoYTID":"sMKoNBRZM1M","category":"Brehmen St. 121"}]

我是angularjs的初学者。任何帮助都将受到高度赞赏。