angular

angular.js

(function() {

    // /users/:user and then using /streams/:user

    var twitchUsers = [
        'freecodecamp', 'goldglove', 'cohhcarnage', 'ellohime', 'siloz', 'xsmak', 'mushisgosu', 'medrybw'
    ];

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

    twitchApp.controller('TwitchController', ['$scope', '$http', function($scope, $http) {
        // ajax call to the remote twitch's server
        // $http.get('https://api.twitch.tv/kraken/users/freecodecamp')
        $scope.streamers = [];

        var getUsers = function(i) {
             $http.get('https://api.twitch.tv/kraken/users/' + twitchUsers[i])
                .then(function(users) {

                    $scope.streamers.push(users.data);
                    console.log(users.data);

                    $http.get('https://api.twitch.tv/kraken/streams/' + $scope.streamers[i].name)
                        .then(function(streams) {
                            //$scope.users[i].streams = streams.stream;
                            console.log(streams.data);

                        }, function(error) {
                            console.log(error);
                        });
                }, function(error) {
                    console.log(error);
                });
        };

        for (var i = 0; i < twitchUsers.length; i++) {
            getUsers(i);
        }


    }]);
})();

html.html

<div class="streamers" ng-controller="TwitchController" class="content">
    <div class="streamer row" ng-repeat="streamer in streamers">
        <a ng-href="http://twitch.tv/{{streamer.name}}" target="_blank">
            <div class="streamer-logo col-md-3">
                <img class="img-responsive" ng-src="{{ streamer.logo }}" alt="{{ streamer.display_name }}" title="streamer.display_name">
            </div>
            <div class="streamer-info col-md-7">
                <div class="streamer-name">
                    {{ streamer.display_name }}
                </div>
                <p>
                    {{ streamer.bio }}
                </p>
            </div>
            <div class="streamer-status col-md-2">
                <div class="status offline">

                </div>
            </div>
        </a>
    </div>
</div>