Linking to next page when using external json data not working

I am new to ionic and angularjs and i am not sure where i am going
wrong. i am trying to get the json from the external link. it returns
the data and displays them perfectly fine, but when i click on one of
the options from the returned list it doesn’t redirect to the notice
details page. everything works fine if the json data is harded coded in,
but i don’t want that. this is the controller and service to handle the
list and the links:

.service('NoticeboardService', function($q, $http) {
 mynotices = $http.get('http://.../app/noticeboard.php').then(function(response){    
        console.log(response.data)          
        return response.data
      })
return {
  notices: mynotices, // if i change this so that it is hard-coded in the links work
  getNotices: function() {
  return this.notices
},
getNotice: function(noticeId) {
  var dfd = $q.defer()
  this.notices.forEach(function(notice) {
     if (notice.id === noticeId) dfd.resolve(notice)
  })

  return dfd.promise
}

}
})

.controller('NoticesCtrl', function($scope, notices) {
     $scope.notices = notices
})

.controller('NoticeCtrl', function($scope, notice) {
      $scope.notice = notice
})

a sample from the data i am displaying:

[
  {

  "id": "1",
  "title": "Notice one",
  "content": null,
  "image": "uploads/news_images/2d3a24b738430c94f3.png",
  "date": "November 20, 2015, 3:19 pm"

 },
{

  "id": "2",
  "title": "Notice Item",
  "content": null,
  "image": "uploads/news_images/6ff8308fd9f2a7baf3.png",
  "date": "November 20, 2015, 3:21 pm"

 }
]