Q:

How to bind a value from a model to URL?

I created two inputs:
<input type="text" ng-model="x">
<input type="text" ng-model="y">

And I want to bind values from models to URL via $routeProvider or $routeParams or anything else. That the URL will change automatically. For example: site.com#/x/y. On the contrary if I request url like: site.com#/2/4 the values from url to input in the models. How to bind all this?

A:

You can use $routeProvider to achieve the same 
in your app.js config method do the below
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
   when('/details/:itemId, {
   templateUrl: 'partial.html',
   controller:'DetailsController'
   })
]);

myApp.controller('DetailsController', ['$scope','$routeParams', 
function DetailsController($scope,$routeParams){
//The model is retrieved from url in the below line
var modelRetrieved = $routeParams.itemId; 
 }]);

Use the below code in html 
<html>
<head>
<!-- include angular libraries and app.js -->
</head>
<body ng-app = "myApp">
<!-- binding the model -->
<input type="text" ng-model="x">
<!-- Passing the model to link -->
<a href "/details/{{x}}"></a>
</body>
</html>

