HTML5 video tag called inside ng-if with false condition or in ng-repeat with empty list
<p>I have a list of videos that can change dinamically server-side; and I want them to appear dinamically on the page, using the HTML5 video tag. If the list is empty, I want the <code>ul</code> tag to show a "no videos" message.</p>

<p>EDIT: I just noticed that it tries to call that wrong link also when the list is not empty. He first tries to call that, and then calls the correct link(s).</p>

<p>My code is as follows. EDIT: as you can see, I'm using the video-js and the videojs-contrib-hls plugins, I don't know if it is relevant:</p>

<pre><code>&lt;html lang="en"&gt;
&lt;head&gt;
    ...
    &lt;link href="http://vjs.zencdn.net/5.10.8/video-js.css" rel="stylesheet"&gt;
    &lt;!-- If you'd like to support IE8 --&gt;
    &lt;script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"&gt;&lt;/script&gt;
    ...
&lt;/head&gt;
&lt;body ng-app="MyApp"&gt;
    &lt;ul ng-if="myVideos.length" ng-cloak&gt;
        &lt;li ng-repeat="myVideo in myVideos" ng-controller="MyCtrl"&gt;
            &lt;div class="videoContainer"&gt;
                &lt;p&gt;{{myVideo.user_id}}&lt;/p&gt;
                &lt;p&gt;{{myVideo.url}}&lt;/p&gt;
                &lt;video class="video-js vjs-default-skin" width="159" height="110" data-setup="{}"&gt;
                    &lt;source src="{{myVideo.url}}" type="application/x-mpegURL"&gt;
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul ng-if="!myVideos.length" ng-cloak&gt;
        &lt;li&gt;
            &lt;div class="videoContainer"&gt;
            No videos to show.
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;

    &lt;script src="js/lib/jquery-1.8.0.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/lib/jquery-ui-1.8.21.custom.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/lib/angular.js"&gt;&lt;/script&gt;&lt;!-- Angular is v1.2.30 --&gt;
    &lt;script src="js/lib/bootstrap/bootstrap-transition.js"&gt;&lt;/script&gt;
    &lt;script src="js/lib/bootstrap/bootstrap-modal.js"&gt;&lt;/script&gt;
    &lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;
    &lt;script src="http://vjs.zencdn.net/5.10.8/video.js"&gt;&lt;/script&gt;
    &lt;script src="js/lib/videojs-contrib-hls.js"&gt;&lt;/script&gt;
    &lt;script src="js/myScript.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>

<p>myScript.js:</p>

<pre><code>var app = angular.module('MyApp', []);

app.factory('socket', function ($rootScope) {
  var socket = io.connect(document.location.origin);
  return {
    on: function (eventName, callback) {
      socket.on(eventName, function () {  
        var args = arguments;
        $rootScope.$apply(function () {
          callback.apply(socket, args);
        });
      });
    },

    emit: function (eventName, data, callback) {
      socket.emit(eventName, data, function () {
        var args = arguments;
        $rootScope.$apply(function () {
          if (callback) {
            callback.apply(socket, args);
          }
        });
      })
    }
  };
});

function MyCtrl($scope, $http, socket, $sce) {

    $scope.videos = [];
    $scope.current_monitor = {name:"", sourceIP:""};

    var httpRequest = $http({
        method: 'GET',
        url: '/getVideos'        
    }).success(function(data, status) {
        $scope.videos = data['videos'];
        $scope.videos.forEach(function(val){
            val.url = $sce.trustAsResourceUrl(val.url);
        });
        updateMainMonitor();
    });
    socket.on('refreshVideos', function (data) {
        $scope.videos = data['videos'];
        $scope.videos.forEach(function(val){
            val.url = $sce.trustAsResourceUrl(val.url);
        });
        updateMainMonitor();
    });

    updateMainMonitor = function(){
        if($scope.videos &amp;&amp; $scope.videos.length){
            $scope.current_monitor = $scope.videos[0];
        } else {
            $scope.current_monitor.name = "No video to show";
            $scope.current_monitor.sourceIP = "";
        }
    }
}
</code></pre>

<p>Unfortunately, if the list is empty when I load the page, I can see in the console the error:</p>

<pre><code>GET http://myIp:8080/%7B%7BmyVideo.url%7D%7D 404 Not found
</code></pre>

<p>Why is it doing that? I know it's just a console error, but I'm new to Angular and it makes me think there is something wrong somewhere. How can I prevent it?</p>