title: methods in angularjs service are not defined
body: <p>I am going over the 2048 game tutorial from ng-newsletter and I am stuck on my gridservice methods not being defined.</p>
  
  <p>Here is the code module that injects the Grid module and its GridService</p>
  
  <pre><code>angular.module('Game', ['Grid'])
    .service('GameManager', ['GridService', function(GridService) {
  
          // create a new game
          this.newGame = function() {
              GridService.buildEmptyGameBoard();
              GridService.buildStartingPosition();
              this.reinit();
          };
    }]);
  </code></pre>
  
  <p>Here is my Grid module and Gridserivce along with the methods angular references as being undefined:</p>
  
  <pre><code>    angular.module('Grid', [])
  
              /**
               * GridService handles all the conditions of the board
               */
              .service('GridService', ['TileModel', function(TileModel) {
  
                  return {
                      buildEmptyGameBoard: buildEmptyGameBoard
                  }
  
                  this.startingTileNumber = 2;
  
  
  
                  // grid array acts the as the board and remains static
                  this.grid = [];
  
                  // tiles array acts the pieces on the board and will be dynamic
                  this.tiles = [];
                  this.tiles.push(new TileModel({x: 1, y: 1}, 2));
                  this.tiles.push(new TileModel({x: 1, y: 2}, 2));
  
                  // Size of the board
                  this.size = 4;
  
  
                  //this.buildEmptyGameBoard = function() {
                  function buildEmptyGameBoard() {
                      var self = this;
  
                      // Initialize our grid
                      for(var x = 0; x &lt; this.size * this.size; x++) {
                          this.grid[x] = null;
                      }
  
                      // Initialize our tile array 
                      // with a bunch of null objects
                      this.forEach(function(x,y) {
                          self.setCellAt({x:x, y:y}, null);
                      });
  
                  }
  
  
          // Run a method for each element in the tiles array
                  this.forEach = function(cb) {
                      var totalSize = this.size * this.size;
                      for(var i = 0; i &lt; totalSize; i++) {
                          var pos = this._positionToCoordinates(i);
                          cb(pos.x, pos.y, this.tiles[i]);
                      }
                  };
  
      // Convert i to x,y
              // cell position from single dimensional array
              // converts to x and y coords for pos on game board
              this._positionToCoordinates = function(i) {
                  var x = i % service.size;
                      y = (i - x) / service.size;
                  return {
                      x: x,
                      y: y
                  };
              };
  
  
  }])
  
      /**
       * TileModel Factory to define values for our tile directive css positions
       */
      .factory('TileModel', function() {
          var Tile = function(pos, val) {
              this.x = pos.x;
              this.y = pos.y;
              this.value = val || 2;
          };
  
          return Tile;
      });
  </code></pre>
  
  <p>Curretnly I am getting this: Error: this.forEach is not a function</p>
  
  <p>I have been able to work out some other errors in this app. all the errors have been about methods in my gridService not being defined or not a function. Seems to be something fundamentally wrong or missing with my GridService that I am failing to see.</p>
  
  <p>Note: both files are called and loading properly in my index.html file</p>