title: "TypeError: Cannot read property 'name' of undefined" error after Angular page refresh
body: <p>Sorry if this is a simple problem, I am a newbie to angular and trying to integrate it as a front end for a basic rails blog app. I am a bit stuck on a problem that I think is related to angular promises, but not sure. I am getting the following error in the console after a page refresh:</p>
  
  <pre><code>TypeError: Cannot read property 'name' of undefined
  at Object.$scope.prepArticleData 
  </code></pre>
  
  <p>I have an articleData service which loads all the table data fine when I point the url to the ArticleIndex page and also loads individual articles when a link is clicked on the Index page. However, when I refresh an individual article page in the browser the currentArticle object data is lost and the data is instead replaced in the view with the angular curly braces. I have googled it quite a bit but can't seem to find the reason why it breaks. Any guidance is much appreciated! </p>
  
  <p>Article service</p>
  
  <pre><code>angular.module('app').factory('articleData', ['$http', ($http) -&gt;
  
  articleData =
  data:
    articles: [{name: 'Loading', content: ''}]
  isLoaded: false
  
  articleData.loadArticles = (deferred) -&gt;
  if !articleData.isLoaded
    $http.get('./articles.json').success( (data) -&gt;
      articleData.data.articles = data
      articleData.isLoaded = true
      console.log('Articles loaded successfully.')
      if deferred
        deferred.resolve()
    ).error( -&gt;
      console.error('Failed to load articles.')
      if deferred
        deferred.reject('Failed to load articles.')
    )
   else if deferred
      deferred.resolve()
  
  articleData.createArticle = (newArticle) -&gt;
  # Client-side data validation
  if newArticle.newArticleName == '' or newArticle.newArticleContent == ''
    alert('Neither the Title nor the Body are allowed to be left blank.')
    return false
  
  # Create data object to POST
  data =
    new_article:
      name: newArticle.newArticleName
      content: newArticle.newArticleContent
  
  # Do POST request to /articles.json
  $http.post('./articles.json', data).success( (data) -&gt;
  
    # Add new article to array of articles
  
    articleData.data.articles.push(data)
    console.log('Successfully created article.')
  
  ).error( -&gt;
    console.error('Failed to create new article.')
  )
  
  return true
  
  return articleData
  
  ])
  </code></pre>
  
  <p>Article controller</p>
  
  <pre><code>@ArticleCtrl = ($scope, $routeParams, $location, articleData) -&gt;
  
  $scope.data =
  articleData: articleData.data
  currentArticle:
    name: 'Loading...'
    content: ''
  
  $scope.data.articleId = $routeParams.articleId
  
  articleData.loadArticles()
  
  $scope.prepArticleData = -&gt;
  article = _.findWhere(articleData.data.articles, { id: parseInt($scope.data.articleId) })
  $scope.data.currentArticle.name = article.name
  $scope.data.currentArticle.content = article.content
  
  
  $scope.prepArticleData()
  
  @ArticleCtrl.$inject = ['$scope', '$routeParams', '$location', 'articleData']
  </code></pre>
  
  <p>This route is set up in the routeProvider to load currently selected article into the mainArticle view:</p>
  
  <pre><code> when('/article/:articleId', { templateUrl: '../assets/mainArticle.html', controller: 'ArticleCtrl' }).
  </code></pre>
  
  <p>The mainArticle view:</p>
  
  <pre><code>&lt;h2 class="text-left"&gt;{{ data.currentArticle.name }}&lt;/h2&gt;
  &lt;div class=""&gt;
  &lt;p&gt;{{ data.currentArticle.content }}&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
  &lt;button class="btn btn-default" ng-click="editPost()"&gt;Edit&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It seems like the prepArticleData function must be called in the ArticleCtrl when page is refreshed, and the  relative articleId passed through again from the url but I have no idea how to do it. Thanks in advance!</p>