title: How to set the slider max value and how to make two way binding for the slider?
body: <p>Following the example provided <a href="http://jsfiddle.net/PRg5h/1/" rel="nofollow noreferrer">here</a> , I have fit the slider as per the requirement</p>
  
  <h2>index.html</h2>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
        &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
        &lt;title&gt;Rating&lt;/title&gt; 
          &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css"&gt;     
          &lt;script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"&gt;&lt;/script&gt;   
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"&gt;&lt;/script&gt;           
  
          &lt;script src="test.js"&gt;&lt;/script&gt;   
      &lt;/head&gt;
  
      &lt;body ng-app="myApp"&gt;       
          &lt;div ng-controller="testController"&gt;                    
                  &lt;table&gt;                 
                      &lt;tr&gt;
                          &lt;td&gt;Amount:&lt;/td&gt;                                        
                          &lt;td&gt;&lt;div slider ng-model="amount" style="width:200px;"&gt;&lt;/div&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type= "text" ng-model="amount" id="txtAmount"&gt;&lt;/td&gt;
                      &lt;/tr&gt;                                                       
                  &lt;/table&gt;                                            
               &lt;/div&gt;      
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>test.js</h2>
  
  <pre><code>var myApp = angular.module("myApp", []);
  myApp.controller("testController", function($scope, $http){
  
      $scope.amount = 1;
  
  }); //end controller
  
  myApp.directive('slider', function() {
        return {
          restrict: 'A',
            scope: {
                ngModel: '='
            },
          link: function(scope, elem, attrs) {
  
            console.log(scope.ngModel);
  
            return $(elem).slider({
              range: "min",
              animate: true,
              value: scope.ngModel,
              slide: function(event, ui) {
                return scope.$apply(function(){
                  scope.ngModel = ui.value;
                });
              }
            });
          }
        };
      });
  </code></pre>
  
  <p>The problem is that</p>
  
  <p>a) Max range cannot be set beyond 100. Say I want the min value as 1 and max as 1000. How to do that?</p>
  
  <p><a href="https://i.stack.imgur.com/vchrC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vchrC.png" alt="enter image description here"></a></p>
  
  <p>b) Two way binding is not happening. Say if I set the value of the "txtAmount " to 50, then the slider should point to that value(50)</p>
  
  <p><a href="https://i.stack.imgur.com/uzjLJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uzjLJ.png" alt="enter image description here"></a></p>