iframeタグの中に、YouTubeのビデオIDが設定されているangular式を指定して
動画再生したいのですが、可能でしょうか。

現状、直接的にビデオIDを指定する方法が分からなかったので、
仕方なくSelectBoxを使っております。
（SelectBoxでビデオIDを選択すると、選択したIDの動画が再生出来るようになっています）
　※以下参照

これを、SelectBoxを使用せずに、直接動画を再生出来るようにすることは可能でしょうか。

色々調べて試行錯誤しましたが、うまくいきませんでした。
ご教授頂けると大変助かります。宜しくお願い致します。

<!DOCTYPE HTML>
<html nd-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">

    <script>
        var app = ons.bootstrap("myApp", [])
          .config(function ($sceDelegateProvider) {
            $sceDelegateProvider.resourceUrlWhitelist([
              'self',
              '"https://www.youtube.com/embed/**'
            ]);
          });

        app.controller('TestController', function($scope, $sce) {
            $scope.trustSrc = function(src) {
                return $sce.trustAsResourceUrl('https://www.youtube.com/embed/' + src);
            };
        })
    </script>

</head>

<body ng-controller="TestController">

    <div>
        <iframe ng-src="{{trustSrc(url)}}"> </iframe>
    </div>

    <div>
        <select ng-model="url">
          <option>{{■YouTubeのビデオID■}}</option>
        </select>
    </div>

</body>

</html>