javascript - Binding nested elements -

I am learning the knowledge and I do not have experience in web development, so I'm not sure that I have the right approach there is a problem.

I have this controller:

  Function Message Controller ($ Scope) {$ scope.messages = [[Body: "This is a video", type: " Video ", linkview:" http://www.youtube.com/watch?v=sIR3KAfhqZQ "}, {body:" This is an image ", type:" image ", linkview:" http: // www .dimensionsinfo .com / wp-content / uploads / 2009/12 / smallest-violin.jpg "}, {body:" this is just text ", type:" newtext ", linkview: null}]; }   
 In my opinion, I want to take a template based on the type of message so that I used the  ng-repeat  and there is a  ng - The following as the switch :  
  & lt; Div ng-controller = "MessagesController" & gt; & Lt; Div ng-repeat = "message in message" & gt; & Lt; Div ng-switch = "message.type" & gt; & Lt; Div ng-switch-when = "image" & gt; {{Message.body}} & lt; Img src = "message.linkvalue" width = "420" height = "345" /> & Lt; / Div & gt; & Lt; Div ng-switch-when = "video" & gt; {{Message.body}} & lt; Iframe src = "message.linkvalue" width = "420" height = "345" /> & Lt; / Div & gt; & Lt; Div ng-switch-when = "NText" & gt; {{Message.body}} & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 But the problem is that the nested elements are not limited to the properties of the messages. I think I'm missing something.  
 Here's a bella  
 Besides - I have not yet written my own instruction because I need to do this work before I start learning this For making.   
 
 
 You have some problems, one by one.  
 1). Use  src  instead of  ng-src  attributes for images and iframes (you should close the iframe tag).  
 Fixed template will look like this:  
  & lt; Div data-ng-repeat = "message in message" & gt; & Lt; Div ng-switch = "message.type" & gt; & Lt; Div ng-switch-when = "image" & gt; {{Message.body}} & lt; Img ng- src = "{{message.linkvalue}}" width = "420" height = "345" /> & Lt; / Div & gt; & Lt; Div ng-switch-when = "video" & gt; {{Message.body}} & lt; Iframe ng- src = "{{message.linkvalue}}" permitted frame frame = "0" width = "420" height = "345" & gt; & Lt; / Iframe & gt; & Lt; / Div & gt; & Lt; Div ng-switch-when = "NText" & gt; {{Message.body}} & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 2). You need an external YouTube URL to load them in iframe:  
  app.config (function ($ sceDelegateProvider) {$ sceDelegateProvider.resourceUrlWhitelist (['self', 'http: // www. Youtube.com/embed/** ']);});   
 A note here will load every YouTube URL in the iframe, but only  http://www.youtube.com/embed/ {id} .  
 Demo: