Untitled

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script src="//unpkg.com/angular-ui-router@0.4.2/release/angular-ui-router.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.3.1/restangular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    
    <div class="wrapper" ui-view></div>
    
  </body>
  

</html>

var app = angular.module('app', ['ui.router','restangular']);

app.config(function($stateProvider, $urlRouterProvider,RestangularProvider){
  
  //RestangularProvider.setBaseUrl('https://feeds.citibikenyc.com/stations');
          
 
   RestangularProvider.setBaseUrl('https://api.mongolab.com/api/1/databases/angularjs');
   RestangularProvider.setDefaultRequestParams({ apiKey: '4f847ad3e4b08a2eed5f3b54' })

  //RestangularProvider.setBaseUrl('https://feeds.citibikenyc.com/stations');
  
  $urlRouterProvider.otherwise('/login');
  
  $stateProvider
    .state('login', {
      url: '/login',
      templateUrl: 'login.html',
      controller: 'LoginCtrl'
    })
    .state('parentstate', {
      url: '/parent',
      templateUrl: 'parent.html',
      controller: 'ParentCtrl'
    })
    .state('parentstate.childstate',{
      url: '/child',
      templateUrl: 'child.html',
      controller: 'ChildCtrl'
      // views: {
      //   '@parentstate': {
      //     templateUrl: 'child.html',
      //     controller: 'ChildCtrl'
      //   }
      // }
    });
    
});

angular.module('app')
  .controller('LoginCtrl', LoginCtrl)
  .controller('ParentCtrl', ParentCtrl)
  .controller('ChildCtrl', ChildCtrl);

function LoginCtrl($scope,$state) {
  $scope.title = 'Login';
 // $state.go("parentstate");
}

function ParentCtrl($scope,$state,$http,$timeout,Restangular) {
  $scope.title = 'Parent State';
//   var config = {
//     headers: {'Access-Control-Allow-Origin': '*'}
// };
   var callHttpReq = function(){
     
   // Restangular.one('stations.json').get().then(function(data){ 
        Restangular.one('collections').get().then(function(data){ 
        $state.go("parentstate.childstate");
      $scope.myData = data;
      $scope.params={
      name:"my_name",
      type:"generic",
      data:data
      };
     
    });
    //var url = $sce.trustAsResourceUrl("https://feeds.citibikenyc.com/stations/stations.json");
			
  //   $http.get(url).then(function (response) {
  
      
  // });
   }
 callHttpReq();
}

function ChildCtrl($scope) {
  console.log($scope.params);
  $scope.params.id=5;
  $scope.title = 'Child State';
}

/* Styles go here */

<div>
  <h3>This is the {{ title }} page.</h3>
  <p>It's nested inside the parent state page.</p>
  
</div>

<div>
  <h1>This is the {{ title }} page.</h1>
  <ul>
    <li><a ui-sref="parentstate">Go to Parent state</a> </li>
    <li><a ui-sref="parentstate.childstate">Go to Child state</a></li>
  </ul>
</div>

<div>
  <h3>This is the {{ title }} page.</h3>
  {{params.name}}
  
  <ul>
    <li><a ui-sref="login">Back to Login</a></li>
  </ul>
  
  <hr>
  
  <div ui-view></div>
</div>