iframe not working in AngularJS 1.3.0

Question

I'm new to web dev. I'm using AngularJS 1.3.0. When I try using {{ things[0].embed }} to insert the embedded source video link from my database, nothing is displayed, but hardcoding the link, for example "//www.youtube.com/embed/wZZ7oFKsKzY", works. Is there something that I'm missing? Am I misusing the scope somehow? Here's another example of what I'm trying to do. If you replace the {{thing[0].embed}} with the youtube link, it works. Why doesn't it replace the {{thing[0].embed}} with the link? http://plnkr.co/edit/Udml7NIyWcUuMtYGDXNc?p=preview

//myCore.js

var coreControl = angular.module('myCore', []);

function mainController($scope, $http) {
    $scope.formData = {};

    $http.get('*')
        .success(function(data) {
            $scope.things = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });

    $scope.doThings = function() {
        $http.post('*', $scope.formData)
            .success(function(data) {
                $scope.formData = {};
                $scope.things   = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };
}

//index.html  
<div ng-if="moves.length==1" class="col-sm-4 col-sm-offset-4">
        <h1> {{ things[0].name }} </h1>
        <iframe width="560" height="315" ng-src="{{ things[0].embed }}" frameborder="0" allowfullscreen></iframe>

        {{ things[0].embed }}
</div>

Answer 1

I know I joined the party late (again), but there you go:

Strict Conceptual Escaping (SCE) is an important concept in Angular should not be taken light-heartedly (if you care about the security of your app).

It is important to understand wht it means and what are the implications and dangers in calling $sce.trustAs...().

This answer gives a little insight on what is SCE and why does Angular treat resources (such as URLs) the way it does.
That answer explains the importance of client-side sanitization (this is what you by-pass by calling $sce.trustAs...() unless you are 100% sure that you can trust it).

---

That said, there might be better (read "safer and more maintainable") ways to achieve the same result.

E.g. $sceDelegateProvider (which is used by the $sce service to decide what is secure and what isn't) provides methods to white-list/black-list resources using string-matching (with optional wildcards) or regular expressions (not recommended).
For more info on how to populate your white-/black-list take a look here.

---

E.g. if you want your application to allow links from www.youtube.com, you can define your white-list like this:

.config(function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self',   // trust all resources from the same origin
        '*://www.youtube.com/**'   // trust all resources from `www.youtube.com`
    ]);
});

See, also, this updated demo.

Answer 2

Your updated plunker

You must explicitly direct angular to trust content that could otherwise provide security holes for xss attacks. That is what the

$sce.trustResourceAsUrl()

function call is for.