angularjs - Angular : Unable to load data and change view successfully -

i have page contains ng-view. embedded template table that, when row clicked on switches detail template row. have been unable controller gather 'detail' data , display it.

with code below, data collected via $http.get, , 'detail' view shown, data not bound 'detail' view.

can please explain going wrong here?

controller.js

(function(){     var appname = 'theapp'     var app = angular.module('theapp', ['ngroute'])     .config(function appconfig($locationprovider, $routeprovider){         $routeprovider         //route called when "show location" called below.         .when( '/' + appname + '/location/:id', {             controller: 'controller',             templateurl: function(params){ return appname + '/location/detail/'+params.id; }         })         .when('/' + appname + '/location',{             controller: 'controller',             templateurl: function(params){return appname + '/location/list'}         })          $locationprovider.html5mode(true);     });      app.controller('controller', function($scope, $location, $window, $http){         $http.get('/service/data/location/list').success(function(locationdata) {              $scope.locationlist = locationlist;             $scope.locationdetail = locationdetail;         });          $scope.showlocation = function(id){             $http.get('/service/data/locations/detail/'+id)                 .success( function(locationdetail){                     //data exists here                     $scope.locationdetail = locationdetail;                     //data updated $scope @ point.                     $location.url($location.path() + '/' + id);                     //templateurl shown, without data.             });         };       } )    })(); 

in angular data not persist across views. once view goes away, data on view's $scope gets wiped out. need save data in factory.

take @ this post, explains how pass data 1 view another.

  angular      .module('app', [])      .factory('myfactory', myfactory)      .controller('myctrl1', myctrl1)      .controller('myctrl2', myctrl2);      function myfactory() {      var fromsender = null;      return {        setsender: function(sender) {          fromsender = sender;        },        getsender: function() {          return fromsender;        }      };    }      function myctrl1(myfactory) {      var vm = this;      vm.setsender = myfactory.setsender;    }      function myctrl2(myfactory) {      var vm = this;      vm.getsender = myfactory.getsender;    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>    <div ng-app="app">    <div ng-controller="myctrl1 ctrl1">      controller 1: <br>      <button ng-click="ctrl1.setsender('from controller 1')">send myfactory</button>    </div>    <hr>    <div ng-controller="myctrl2 ctrl2">      controller 2: <br>      value ctrl1 via myfactory:  {{ctrl2.getsender()}}    </div>  </div>