AngularJS Variables across Views (same controller) -

i've got angularjs app has (for now) 1 controller multiple views. of data pulled via $http.

in 1 view, it's got ng-repeat 'leagues'. it's got button has ng-click take amount of teams league , amount of players per team , pass them function , set them variables. function redirects view page $location.

in page, it's got binds @ variables. however, nothing shows. can log information won't show when view changes.

here's git repo it.

1. leagues.html, line 27 ng-click calls function in list item 3, below, , send teams.html.
2. teams.html, show variables (for testing, trying display them before creating ng-repeat)
3. public/javascripts/app.js, line 63 function render variables.

most of answers tend "use different views" or "use ui-router". why doesn't work?

please see code snippets below.

leagues.html

<div class="container col-md-12">     <h1>manage leagues</h1>     <div class="table-responsive">         <table class="table">             <tr>                 <th>league name</th>                 <th>location</th>                 <th>start date</th>                 <th>duration</th>                 <th>team count</th>                 <th>courts</th>                 <th>format</th>                 <th>manage league</th>                 <th>add players</th>                 <th>archive</th>             </tr>             <tr ng-repeat="league in leagues">                 <td>{{league.league_name}}</td>                 <td>{{league.park_location}}</td>                 <td>{{league.start_date | date:'dd-mm'}}</td>                 <td>{{league.league_duration}}</td>                 <td>{{league.team_count}}</td>                 <td>{{league.court_ct}}</td>                 <td>{{league.player_count}}</td>                 <td><a class="btn btn-success">manage</a></td>                 <!-- logs player , team count-->                 <td><button class="btn btn-success" ng-click="createteam(league.id,league.team_count,league.format)">add</button></td>                <!-- //-->                 <td><button class="btn btn-danger" ng-click="archiveleague(league.id)">archive</button></td>             </tr>         </table>     </div> </div> 

teams.html

<div class="container">     <h1>create teams</h1>     <h3>{{current-id}}</h3>     <h3>{{current-teams}}</h3>     <h3>{{current-format}}</h3>     <h3>done</h3> </div> 

public/javascripts/app.js

/**  * created nhyland on 7/16/15.  */ var myapp = angular.module('myapp', ['ngroute']);  myapp.config(function ($routeprovider) {      $routeprovider         .when('/', {             templateurl: "/pages/main.html",             controller: 'maincontroller',             map: 'main'         })         .when('/leagues', {             templateurl: "/pages/leagues.html",             controller: 'maincontroller',             map: 'leagues'         })         .when('/create', {             templateurl: "/pages/create.html",             controller: 'maincontroller',             map: 'create'         })         .when('/create/team', {             templateurl: "/pages/teams.html",             controller: 'maincontroller',             map: 'teams'         })         .otherwise({             template: "<h1>page not exist.</h1>"         }); });  myapp.controller('maincontroller', function($scope, $http, $location) {     $scope.test = "angular working";     $scope.createleague = function() {         $scope.league.archived = 0;         $http.post('/app/create/league', $scope.league)             .success(function(data) {                 console.log(data);                 $scope.leagueinfo = data;                 $scope.leagues = {};                 $location.path("/leagues");             })             .error(function(error) {                 console.log('error: ' + error);             });     };      function getleagues() {         $http.get('/app/leagues/director/' + director)             .success(function(data) {                 console.log(data);                 $scope.leagues = data;             })             .error(function(error) {                 console.log(error);             })     }      getleagues();      $scope.createteam = function(id, teams, format) {         console.log('league details: ' + id);         console.log('league details: ' + teams);         console.log('league details: ' + format);          $scope.currentid = id;         $scope.currentteams = teams;         $scope.currentformat = format;          $location.path('/create/team');          $scope.getnum = function(num) {             return new array(num);         };     };      $scope.archiveleague = function(id) {         $http.put('/app/leagues/archive/' + id + '/' + director)             .success(function(data) {                 console.log(data);                 $scope.leagues = data;             })             .error(function(error) {                 console.log(error);             })     }; }); 

it not work because every time route change, new controller instance created. means scope reinitialized , therefore lose value wanted save. see this, inspect element in browser , put break point @ begining of controller. see new instance created when view changes. (your $scope change)

it recomended have 1 controller per view , use services or factories when want share data across controllers.