Sidemenu Master Detail data from Firebase

I am having troubles to pass values from master list to detail. Even when select a “person” on master list this code is showing the default rout (browse.html), so I understand probably I have two problems: 1st Routing and 2nd passing data from master to detail in order to show additional information.

Please help me guys, thanks in advance.

Starter: Sidemenu
Data from: Firebase

app.js


.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.browse', {
      url: '/browse',
      views: {
        'menuContent': {
          templateUrl: 'templates/browse.html'
        }
      }
    })
 
    .state('app.master', {
      url: '/master',
      views: {
        'menuContent': {
          templateUrl: 'templates/master.html',
          controller: 'MasterCtrl'
        }
      }
    })
  .state('app.details', {
    url: '/master/:personId',
    views: {
      'menuContent': {
        templateUrl: 'templates/details.html',
        controller: 'DetailsCtrl'
      }
    }
  });

  $urlRouterProvider.otherwise('/app/browse');
});

  
controllers.js


angular.module('starter.controllers', [])

.factory('PeopleService', function($firebaseArray, $firebaseObject){

  var ref = new Firebase('https://marcelperez-master-detail.firebaseio.com');
  return {
    getPeople: function(){
      return $firebaseArray(ref.child('people'));
    },
    getPerson: function(personId){
      return $firebaseObject(ref.child('people').child(personId));
    }
  }
})

.controller('MasterCtrl', function($scope, PeopleService){
  $scope.people = PeopleService.getPeople();
    
})

.controller('DetailsCtrl', function($scope, $stateParams, PeopleService){
  var personId = $stateParams.id;
  $scope.person = PeopleService.getPerson(personId);
  
});

master.html {{person.name}} details.html

{{person.name}}

{{person.website}}

As far as i see you have to controller and two html page in which you are getting data
try this
make a service to get data from one page to another and inject the below service in your controller.

app.factory(‘Grabdata’, function(){
var currdata={};

return
{
passdata:function(obj)
{
currdata=obj;
},
getdata:function()
{
return currdata;
currdata={};
}
}

});
IN MasterCtrl -

$scope.people=[];
$scope.people = PeopleService.getPeople();

$scope.gotodetails=function(item)
{
Grabdata.passdata(item);
$state.go(‘detail’);
}

console.log($scope.people) // Are you getting data here in console.log . If getting than

in master.html
< ion-item ng-repeat= “item in people” ng-click=gotodetails(item){{item.name}}< /ion-item>

DetailCtrl
$scope.data =GrabData.getdata();
console.log(data) // IF you are getting data here Than

in details.html

< h2 >{{data.name}} < /h2 >
< h3 >{{data.website}}< /h3>

hope this w’ll help you .