angularjs - routing with search parameters

Question

Let's say my current location is /phones

I want to route to a different controller and generate a url like /phonedetails?brand=x&size=y&price=z

How can I set up the route and controller?

//partial phonelist.html

<form id="phones-form">
 <input id="brand" type="text" placeholder="brand" ng-model="phoneInfo.brand">
 <input id="size" type="text" placeholder="size" ng-model="phoneInfo.size">
 <input id="price" type="text" placeholder="price" ng-model="phoneInfo.price">
 <button type="submit" class="btn btn-primary btn-lg" ng-click="getPhones()">Search</button>
</form>

//controller
$scope.phoneInfo = {};
$scope.getPhones() { 
  $location.search($scope.phoneInfo);
}

$location.search() generates a url like /phones?brand=x&size=y&price=z and doesn't transfer control to the other controller.

Maybe I am completely wrong in my understanding of routes. What is the right way to achieve this?

Answer 1

$location.search() will only control the query string. To change the location, you need to use $location.path().

$scope.getPhones() { 
    $location.search($scope.phoneInfo);
    $location.path('/phonedetails');
}