title: Using MVC Controller to pass data into ng-repeat in MVC View (beginner)
body: <p>I am trying to basically connect a SQL server DB to my angular application using .NET MVC. I initially built the app on <strong><a href="http://embed.plnkr.co/uhwXJ456OyRFQbXnz1rS/preview" rel="nofollow">Plunker (demo)</a></strong> and used a factory class for temp data, but now I am trying to implement it in MVC with real db data. My problem is that I am getting confused on Controllers, since MVC has a controller itself along with AngularJS's own controllers and I am not sure how to connect the two.</p>
  
  <p>What I have thus far is the following.</p>
  
  <p><strong>MVC Controller (condensed)</strong></p>
  
  <pre><code>public class TestController : Controller
  {
     private MoviesEntities db = new MoviesEntities();
          public ActionResult account()
          {
              return View(db.Users.ToList().OrderBy(x =&gt; x.name));
          }
  }
  </code></pre>
  
  <p><strong>MVC View</strong></p>
  
  <pre><code>@model IEnumerable&lt;WebApplication2.Entities.User&gt;
  
  @{
      ViewBag.Title = "account";
      Layout = "~/Views/Shared/_LayoutTest.cshtml";
  }
  
  @Styles.Render("/Content/style.css")
  &lt;div ng-app="app"&gt;
      &lt;div ng-controller="AccountController"&gt;
          &lt;input type="text" ng-model="search.$"&gt;
          &lt;table class="table table-striped"&gt;
              &lt;tr ng-repeat="actors in Model"&gt;
                  &lt;td&gt;{{actors.name}}&lt;/td&gt;
                  &lt;td&gt;{{actors.summoner}}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  @Scripts.Render("~/Scripts/angular.js")
  @Scripts.Render("~/Scripts/angular-route.min.js")
  @Scripts.Render("~/Scripts/app.js")
  </code></pre>
  
  <p>Now at this point I tried adding a reference to my <code>app.js</code> file but no data is shown or displayed, just a table with {{actors.name}} and {{actors.summoner}}. I  have been searching and trying to find some tutorial on this basic implementation but cannot find a thing. If someone could show me what to do and explain why this isn't working that'd be awesome! I think the use of Controllers is just throwing me off, and I am not sure how to turn my <code>factory</code> in <code>app.js</code> into holding the database table values.</p>
  
  <p><strong>app.js</strong> (plunker demo of what I am trying to implement onto MVC now -> <strong><a href="http://embed.plnkr.co/uhwXJ456OyRFQbXnz1rS/preview" rel="nofollow">Demo</a></strong></p>
  
  <pre><code>var app = angular.module("app", ['ngRoute']);
  
  app.config(function ($routeProvider) {
      $routeProvider
  
      .when('/', {
          templateUrl: 'pages/home.html',
          controller: 'HomeController'
      })
  
      .when('/home', {
          templateUrl: 'pages/home.html',
          controller: 'HomeController'
      })
  
      .when('/login', {
          templateUrl: 'pages/login.html',
          controller: 'LoginController'
      })
  
      .when('/account', {
          templateUrl: 'pages/account.html',
          controller: 'AccountController'
      })
  
      .when('/unknown', {
          templateUrl: 'pages/unknown.html',
          controller: 'UnknownController'
      })
        .otherwise({
            redirectTo: '/unknown'
        });
  });
  
  
  app.factory('userService', function () {
      return {
          users: [{
              name: "John",
              password: "12345",
              email: "johnny@gmail.com",
              phone: "238-491-2138"
          }, {
              name: "Austin",
              password: "intern",
              email: "aanderson@gmail.com",
              phone: "138-490-1251"
          }, {
              name: "Sally",
              password: "noob",
              email: "Sally123@gmail.com",
              phone: "243-421-0738"
          }, {
              name: "Bilbo",
              password: "Baggins",
              email: "oneRing@gmail.com",
              phone: "158-491-2138"
          }, {
              name: "Marco",
              password: "Wafflez",
              email: "waffleLord@gmail.com",
              phone: "935-491-2654"
          }, {
              name: "Sam",
              password: "Adams",
              email: "beeeeeer@gmail.com",
              phone: "743-491-2131"
          }, {
              name: "Willy",
              password: "W0nk4",
              email: "w0nkaz@gmail.com",
              phone: "682-491-2983"
          }]
  
      };
  });
  
  app.controller('LoginController', function ($scope, $location, userService, $timeout) {
      $scope.credentials = {
          username: "",
          password: ""
      };
      $scope.credentialsR = {
          username: "",
          password: ""
      };
  
      $scope.login = function () {
          for (var i = 0; i &lt; userService.users.length; i++) {
              if (userService.users[i].name.toLowerCase() === $scope.credentials.username.toLowerCase()) {
                  if (userService.users[i].password === $scope.credentials.password) {
                      $scope.messageLogin = "Success!";
                      $timeout(function () {
                          $timeout(function () {
                              $location.path("/home");
                          }, 500)
                          $scope.messageLogin = "Redirecting...";
                      }, 500)
                  } else {
                      $scope.messageLogin = "Incorrect login details";
                  }
  
                  return;
              }
          }
  
          $scope.messageLogin = "Username does not exist";
      };
  
      $scope.checkName = function () {
          for (var i = 0; i &lt; userService.users.length; i++) {
              if (userService.users[i].name.toLowerCase() === $scope.credentialsR.username.toLowerCase()) {
                  $scope.messageRegister = "Taken";
                  return;
              }
          }
  
          $scope.messageRegister = "Available";
      };
  });
  
  app.controller('HomeController', function ($scope) {
      $scope.title = "Home";
  });
  
  app.controller('AccountController', function ($scope, userService, $resource) {
      var Users = $resource('/Test/')
      $scope.userList = userService.users;
  });
  
  app.controller('UnknownController', function ($scope) {
  
  });
  </code></pre>
  
  <p>I also used NuGet to install AngularJS, so I believe referencing <code>angular.js</code> at the bottom should be fine as well. </p>
  
  <p>Started building this layout from <strong><a href="https://egghead.io/lessons/angularjs-ngrepeat-and-filtering-data" rel="nofollow">ngRepeat and Filtering Data</a></strong></p>
  
  <p><strong>Current Error(s)</strong></p>
  
  <pre><code>Error: [$injector:unpr] Unknown provider: $resourceProvider &lt;- $resource
  http://errors.angularjs.org/1.2.21/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource
      at http://localhost:56087/Scripts/angular.js:78:12
      at http://localhost:56087/Scripts/angular.js:3776:19
      at Object.getService [as get] (http://localhost:56087/Scripts/angular.js:3904:39)
      at http://localhost:56087/Scripts/angular.js:3781:45
      at getService (http://localhost:56087/Scripts/angular.js:3904:39)
      at invoke (http://localhost:56087/Scripts/angular.js:3931:13)
      at Object.instantiate (http://localhost:56087/Scripts/angular.js:3951:23)
      at http://localhost:56087/Scripts/angular.js:7244:28
      at http://localhost:56087/Scripts/angular.js:6635:34
      at forEach (http://localhost:56087/Scripts/angular.js:332:20) 
  </code></pre>