bootstrap carousel TypeError: f[0] is undefined
<p>We are working with Bootstrap Carousel and want to load dynamic slides (a slide for each item in an array).  AngularJS is used to generate array and loop through. </p>

<p>But while running, we got a javascript error<code>TypeError: f[0] is undefined</code>    . The array is filled by $http.get </p>

<p>Tried alternate possibilities from <a href="https://docs.angularjs.org/" rel="noreferrer">https://docs.angularjs.org/</a> and <a href="http://w3schools.com" rel="noreferrer">http://w3schools.com</a></p>

<ul>
<li>Carousel is working if array is defined within the script without using $http.get</li>
<li>$http.get generated array is displayed properly in "tr ng-repeat"</li>
</ul>

<p>This is the code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="ISO-8859-1"&gt;
&lt;title&gt;Fresh&lt;/title&gt;
&lt;link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
&lt;script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
&lt;script
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;div ng-app="myApp" ng-controller="myCtrl"&gt;

        &lt;div ng-show="names.length"&gt;

            &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
                &lt;ol class="carousel-indicators"&gt;
                    &lt;li data-target="#myCarousel" data-slide-to="{{ $index }}"
                        ng-repeat="x in names"&gt;&lt;/li&gt;
                &lt;/ol&gt;

                &lt;div class="carousel-inner" role="listbox"&gt;
                    &lt;div class="item" ng-repeat="x in names"&gt;{{x.Name}}
                        {{x.Country}}&lt;/div&gt;
                &lt;/div&gt;

                &lt;a class="left carousel-control" href="#myCarousel" role="button"
                    data-slide="prev"&gt; &lt;span
                    class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
                    &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                &lt;/a&gt; &lt;a class="right carousel-control" href="#myCarousel" role="button"
                    data-slide="next"&gt; &lt;span
                    class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
                    &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                &lt;/a&gt;

            &lt;/div&gt;

        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;

        // window.alert('Inside script');
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $http) {
            // window.alert( 'Inside controller' );
            $scope.names = [];
            $http.get("http://www.w3schools.com/angular/customers.php").then(
                    function(response) {
                        $scope.names = response.data.records;
                        window.alert('Inside get');
                    });

        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>