Redirect the JSON response to another html page (Angular)

Question

I just recently started using Angular, and I am trying to redirect the response of http.get to another html page which is result.html. I used services to share data:

Here is my controller code:

  app.controller("controller", function($scope, $http, $window, sharedProperties){
  $scope.generate = function(){
    $http.get('repositories', {params: { username : $scope.username }}).
    then(function mySucces(response) {
      $scope.error = "";
      sharedProperties.setData(response.data);
      $window.location.href = '/result.html';
    }, function myError() {
      $scope.error = "Wrong Username";
    });
  }
});

app.controller("resultController", function($scope, $window,sharedProperties){
  $scope.names = sharedProperties.getData();
  $scope.home = function() {
    $window.location.href = '/index.html';
  }
  });

Here is the services.js code:

app.service('sharedProperties', function() {
    var data;
    return {
        getData: function() {
            return data;
        },
        setData: function(value) {
            data = value;
        },
    }
});

Here is the index.html body:

<div ng-app="App" ng-controller="controller">
    <p>
      <input type="text" ng-model="username"  placeholder="Enter username here" required>
      <button ng-click="generate()">Generate</button>
    </p>

   {{ error }}
</div>

And here is the result.html that I want the response goes to:

<div ng-app="App" ng-controller="resultController">
    <p><button ng-click="home()">Home</button></p>
    <ul>
        <li ng-repeat="x in names">
            {{ "Name: " + x.name + ", Languages: " + x.languages }}
        </li>
    </ul>
</div>

The controller set the response data through sharedProperties so the resultController can use it, however after the page redirects to result.html the result is not shown.

UPDATE

It seems the data is not shared between the two controller, console.log shows undefined. Is it because of 2 different html files? or is it because of redirect?

UPDATE 2

I realized that redirect will reset all the data, so I use sessionStorate for the service:

app.service('sharedProperties', function() {

    return {
        getData: function() {
            return sessionStorage.sharedProperties;
        },
        setData: function(value) {
           sessionStorage.sharedProperties = value;
        },
    }
});

however console.log instead of showing the values of json, it shows:

"[object Object],[object Object],[object Object],[object Object],[object Object]"

The real value is suppose to be:

[{"name":"git-consortium","languages":"No Language Reported"},{"name":"hello-worId","languages":"No Language Reported"},{"name":"Hello-World","languages":"No Language Reported"},{"name":"octocat.github.io","languages":"CSS JavaScript HTML "},{"name":"Spoon-Knife","languages":"CSS HTML "}]

Any thoughts on this?

Answer 1

Even Though the response that I was getting was json, I had to still convert to json using angular.toJson().

Here is the service to save the json data:

app.service('sharedProperties', function() {
    return {
        getData: function() {
            return angular.fromJson(sessionStorage.sharedProperties);
        },
        setData: function(value) {
           sessionStorage.sharedProperties = angular.toJson(value);
        },
    }
});

So now even after redirecting to another page, I can still access the data.