title: AngularJS returning undefined on first ng-click
body: <p>Im a building a system that fetches new events based on the date sent to the API using AngularJS. I am currently still in in the learning stages of AngularJS so Im wondering is there something Im missing.</p>
  
  <p>My problem is , even though the data loads correctly on the page load, when I click the button the first time I am getting <code>undefined</code> for <code>$scope.newEvents</code> even though it is successfully getting the data from the API (I can see in the console).</p>
  
  <p>I was attempting to build a JSFiddle but I was having trouble getting the whole thing to work on it.</p>
  
  <p>here is the html output...</p>
  
  <p>The output...</p>
  
  <pre><code>    &lt;ul&gt;
        &lt;li ng-repeat="event in events | orderBy:'-event_date' "&gt;
          &lt;span &gt;{{event.event_date}},{{event.event_name}}, {{event.event_venue}}, {{event.event_description}} &lt;/span&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>The get request in my js...</p>
  
  <pre><code>var eventApp = angular.module('eventApp', ['ngRoute']);
  
  
  eventApp.factory("services", ['$http', function($http) {
  
      var apiBase = 'http://example.net/angular-api/'
  
      var service = {};
  
      service.getEvents = function(latest_date){
          return $http.get(apiBase + 'events?latest_date=' + latest_date);
      }
  
      return service;   
  }]);
  </code></pre>
  
  <p>When the page loads its working fine, it makes a successful request and updates <code>$scope.events</code> ...</p>
  
  <pre><code>var date = new Date();
  
  $scope.todays_date = date.getUTCFullYear() + '-' +
      ('00' + (date.getUTCMonth()+1)).slice(-2) + '-' +
      ('00' + date.getUTCDate()).slice(-2) + ' ' + 
      ('00' + date.getUTCHours()).slice(-2) + ':' + 
      ('00' + date.getUTCMinutes()).slice(-2) + ':' + 
      ('00' + date.getUTCSeconds()).slice(-2);
  
  $scope.events = [{}];
  
  services.getEvents($scope.todays_date).then(function(data){
      $scope.events = data.data;
  
  });
  </code></pre>
  
  <p>But when click the button that loads the <code>ng-click</code> function I am getting undefined for my data. I initially figured there was something wrong with the date format, but the fact that it is successfully getting the data is what is confusing me. The problems start at <code>then</code> below...</p>
  
  <pre><code>        $scope.addFiveNew = function (new_or_old) {
  
          if (new_or_old == 'new') {
  
              $scope.latest_date = $scope.getNewestDate();
  
  
              services.getEvents($scope.latest_date).then(function(data){
                  $scope.newEvents = data.data;
              });
  
              console.log($scope.newEvents);
  
              // update the list (this is currently failing on first click)
              angular.forEach($scope.newEvents,function(item) {
                  $scope.events.push(item);
              });
  
  
          }
  </code></pre>
  
  <p>this function in the controller creates the date to send...</p>
  
  <pre><code>$scope.getNewestDate = function() {
          var sortedArray = $filter('orderBy')($scope.events, 'event_date');
          var NewestDate = sortedArray[sortedArray.length - 1].event_date;
          return NewestDate;
      };  
  </code></pre>
  
  <p>Here is an example of some data...</p>
  
  <pre><code>{
   "event_id":"1",
   "event_name":"Event 1",
   "event_date":"2014-09-26 00:00:00",
   "event_venue":"Limerick",
   "event_description":"stuff"
  }
  </code></pre>