title: Why is this AngularJS ng-repeat example not working?
body: <p>Sorry for asking this.
  But I searched everywhere and I can't understand why this example is not working:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-controller="VenuesController"&gt;
              &lt;div ng-repeat="field in fields"&gt;
                  &lt;!-- Table --&gt;
                  &lt;table class="table"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;p align=center&gt;{{field.name}} - {{field.sport}} {{field.price}}
                          &lt;/p&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;p align=center&gt;&lt;/p&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr ng-repeat="hour in field.hours"&gt;
                          &lt;td&gt;&lt;p align=center&gt;{{hour.from}} - {{hour.to}}&lt;/p&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;p align=center&gt;&lt;button type="button" class="btn btn-success"&gt;{{hour.state}}&lt;/button&gt;&lt;/p&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$scope.searchFieldsState = function() {
  
      $scope.fields = [
          {'name': 'Cancha 1', 'sport': 'Futbol', 'price': '$150',
              'hours' : [
                  {'from': '10:00', 'to': '11:00', 'state': 'Libre'},
                  {'from': '11:00', 'to': '12:00', 'state': 'Libre'},
                  {'from': '12:00', 'to': '13:00', 'state': 'Libre'},
                  {'from': '13:00', 'to': '14:00', 'state': 'Libre'}
                  ]
          },
          {'name': 'Cancha 2', 'sport': 'Futbol', 'price': '$170',
              'hours' : [
                  {'from': '10:00', 'to': '11:00', 'state': 'Libre'},
                  {'from': '11:00', 'to': '12:00', 'state': 'Libre'},
                  {'from': '12:00', 'to': '13:00', 'state': 'Libre'},
                  {'from': '13:00', 'to': '14:00', 'state': 'Libre'}
              ]
          },
          {'name': 'Cancha 3', 'sport': 'Tenis', 'price': '$170',
              'hours' : [
                  {'from': '10:00', 'to': '11:00', 'state': 'Libre'},
                  {'from': '11:00', 'to': '12:00', 'state': 'Libre'},
                  {'from': '12:00', 'to': '13:00', 'state': 'Libre'},
                  {'from': '13:00', 'to': '14:00', 'state': 'Libre'}
              ]
          }
      ];
  };
  </code></pre>
  
  <p>I'm sure that the function <code>searchFieldsState</code> is being executed because I used a <code>console.log</code> command for debugging purposes.</p>
  
  <p>So, can anyone see any mistake here? A fresh eye would be helpful.</p>
  
  <p>Thank you very much in advance.</p>
  
  <p>UPDATE:</p>
  
  <p>I initialized the $scope.fields outside the function and ng-repeat worked. But this is not what I need so... The problem persist</p>
  
  <p>I will add my navbar code because I think it is related with this issue:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="#/sportmap"&gt;SportMap&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#/lockerroom"&gt;Ingresar&lt;/a&gt;&lt;/li&gt;
          &lt;li &gt;&lt;a ng-controller="VenuesController" href="#/venue"&gt;Administraci&amp;oacute;n&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  </code></pre>
  
  <p>The route:</p>
  
  <pre><code>myApp.config(['$routeProvider',
  function($routeProvider) {
      $routeProvider.
      when('/index', {
          templateUrl: 'search.html',
          controller: 'VenuesController',
          restricted: false
      }).
      when('/venue', {
          templateUrl: 'venue.html',
          controller: 'VenuesController'
      }).
      otherwise({
          redirectTo: '/index'
      });
  </code></pre>
  
  <p>}]);</p>
  
  <p>Thank you guys!</p>
  
  <hr>
  
  <p>Updating with the working code:</p>
  
  <p>The HTML file with the ng-repeat was ok.</p>
  
  <p>I had to modify the navbar.html template</p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="#/sportmap"&gt;SportMap&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#/lockerroom"&gt;Ingresar&lt;/a&gt;&lt;/li&gt;
          &lt;li &gt;&lt;a href="#/venue/1" &gt;Administraci&amp;oacute;n&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>So then I changed the route</p>
  
  <pre><code>when('/venue/:venueid', {
     templateUrl: 'venue.html',
     controller: 'VenuesController'
  }).
  </code></pre>
  
  <p>with this I receive a parameter called venueid. And then...</p>
  
  <p>the magical trick based in Carlos Barcelona suggestion:</p>
  
  <pre><code>var venuesControllers = angular.module('myApp');
  
  venuesControllers.controller('VenuesController', ['$scope', '$resource', '$location', '$routeParams',
  function ($scope, $resource, $location, $routeParams) {
  
  //This is a venue initialization it may be no needed. TODO: try not to use it.
  $scope.venue = {city: "", sport: "", venueid: ""};
  
  //Here I just declare the function
  
  $scope.showVenueFields = function () {
      // To search by city and/or sport
      console.log($scope.venue.venueid);
      $scope.venue.name = 'El Andén';
      $scope.venue.fields = [
          {'name': 'Cancha 1', 'sport': 'Futbol', 'price': '$150',
              'hours' : [
                  {'from': '10:00', 'to': '11:00', 'state': 'Libre'},
                  {'from': '11:00', 'to': '12:00', 'state': 'Libre'},
                  {'from': '12:00', 'to': '13:00', 'state': 'Libre'},
                  {'from': '13:00', 'to': '14:00', 'state': 'Libre'}
              ]
          },
          {'name': 'Cancha 2', 'sport': 'Futbol', 'price': '$170',
              'hours' : [
                  {'from': '10:00', 'to': '11:00', 'state': 'Libre'},
                  {'from': '11:00', 'to': '12:00', 'state': 'Libre'},
                  {'from': '12:00', 'to': '13:00', 'state': 'Libre'},
                  {'from': '13:00', 'to': '14:00', 'state': 'Libre'}
              ]
          },
          {'name': 'Cancha 3', 'sport': 'Tenis', 'price': '$170',
              'hours' : [
                  {'from': '10:00', 'to': '11:00', 'state': 'Libre'},
                  {'from': '11:00', 'to': '12:00', 'state': 'Libre'},
                  {'from': '12:00', 'to': '13:00', 'state': 'Libre'},
                  {'from': '13:00', 'to': '14:00', 'state': 'Libre'}
              ]
          }
      ];
  }
  
  
  if ($routeParams.venueid){
      console.log("Leo los parametros");
      $scope.venue.venueid = $routeParams.venueid;
      //Here I really call the function and initialize the venue.fields
      $scope.showVenueFields();
  
  } else {
      // Do something
  }
  
  
  
  // this ends the controller's declaration
  }]);
  </code></pre>