On clicking Search Button, display result in the next page - angularjs

Question

I searched for the solution but could not find the exact solution so posted here.
I have a search bar in the header menu. When search content is typed and clicked on search button, the result needs to be display in a new page (eg. result.html). API is used to fetch the searched result.
I have added js pseudo code below which will explain what I intend to do.
Thank you for the suggestion.
navigation
<nav class="navbar navbar-default navbar-fixed-top navbar-search-box animate" role="navigation">
<div class="row">
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav" id="main-nav">
<li> ... </li>
<li>
<div class="search-bar-search animate">
<div class="container" ng-controller="searchCtrl">
<div class="input-group">
<input type="text" class="form-control" id="q" ng-model="q" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-click="search()">Search</button>
</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
Search.js
var app = angular.module('myApp', ['ngRoute']);
app.service('searchService', function($http) {
this.getResult = function(q) {
// o/p is in JSON format
return $http.get('http://mydomainname/api/search/'+q);
}
});
app.controller('searchCtrl', function ($scope, searchService){
$scope.search = function (){
var q = $scope.q;
searchService.getResult(q).then(function (response){
$scope.result = response.data;
// redirect to new template (result.html) and display result
...
...
});
};
});