TOP 10, services project, AngularJS 1.X

top 10

Hi!
I’m struggling to complete this project, as for some reason the html or JavaScript of the project is not rendering on the browser. I have tried everything from reading my code again and again as well as followed the walkthrough but i cant get it to work. Here is my code:

index.html

<!DOCTYPE html>
<html>
  <head>
      <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href="https://content.codecademy.com/projects/bootstrap.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/vendor/angular.min.js"></script>
  </head>
  <body ng-app="Top10App">
    <div class="header">
      <div class="container">
        10
      </div>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container">
        <div class="content">

          <!--
          TODO: Loop through shows and display each one with this HTML -->
          <div ng-repeat="show in shows">
            <div class="rank">{{$index + 1}}</div>
            <tv-show info="show" ></tv-show>
            </div>
          

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

    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/MainController.js"></script>

    <!-- Directives -->
    <script src="js/directives/tvShow.js"></script>

    <!-- Services -->
    <script src="js/services/shows.js"></script>
  </body>
</html>

app.js

var app = angular.module("Top10App", []);

shows.js

app.factory('shows', ['$http', function($http) { 
  return $http.get('https://content.codecademy.com/courses/ltp4/shows-api/shows.json') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]); 

MainController.js

app.controller('MainController', ['$scope', 'shows', function($scope, shows) { 
  // ... 
  shows.success(function(data) { 
    $scope.shows = data; 
  }); 
}]); 

tvShow.js

app.directive('tvShow', function() { 
  return { 
    restrict: 'E', 
    scope: { 
      info: '=' 
    }, 
    templateUrl: 'js/directives/tvShow.html' 
  }; 
});

tvShow.html

<div class="img_container">
  <img class="img-responsive" ng-src="{{info.series_img}}" >
</div>
<h2 class="series">{{info.series}} </h2>
<p class="genre"> {{info.genre}} </p>
<p class="run-start">{{info.run_start}} </p>
<p class="description"> {{info.description}}</p>

Hopefully someone can comprehend my code and instruct me about where i went wrong.
Thank you so much in advance.