slider position for a dynamic input[range] with changing min/max values in Angular?

Question

So I have an input[type=range] where the min and max attributes change based on an $http call.

  <input type="range" name="bidSlider" id="bidSlider" min="{{bid.min}}" max="{{bid.max}}" ng-model="bid.value" step="1">

bid.max = 1.5 * bid.value;
bid.min = .5 * bid.value;

bid.value is undefined until an $http call comes back. I could initialize bid.min & bid.max to be some default value, however it would be a very bad experience because there's no way for me to really guess what bid.min and bid.max will be (they are based on bid.value), since bid.value can be as low as 50, and can also be upwards in the thousands.

If I don't initialize default values for bid.min or bid.max, the min/max of the range defaults to 0-100 and usually the slider is position all the way to the right or left.

What's the best way to handle this scenario?

See Plunker Example

EDIT :
This is not so much of an issue of the slider jumping around because it happens pretty quickly... it's that the slider doesn't reposition itself relative to the new range once the bid.value, bid.min && bid.max becomes set rather, the slider (bid.value) repositions itself relative to the default range, 0-100 so it appears to be at the minimum range or the maximum range when in fact the value falls in the middle of the range.

Answer 1

You could also hide element until ajax gets loaded & till then you can show some loading image, which would tell user that UI controller is loading

<input ng-if="bid.min && bid.min" type="range" name="bidSlider" id="bidSlider" 
min="{{bid.min}}" max="{{bid.max}}" ng-model="bid.value" step="1">
<img ng-if="!bid.min || !bid.max" ng-src="loadingImg.jpg" width="50" height="50">

Answer 2

So I fixed this issue by appending the input when the ajax call came back. So the plunker above was a very simplified version. In my real life code, I am doing this in an angular directive which is why it is wrapped into a link function. The BiddingValue:Finish event is broadcasted when the ajax call with bid.value comes back, with the bid object (which has the calculated min and max) as params.

link: function (scope, elem) {
    scope.$on('BiddingValue:Finish', function (evt, params) {
          var input = ' <input type="range" name="bidSlider" id="bidSlider" min="'+{{bid.min}}+'" max="'+{{bid.max}}+'" ng-model="bid.value" step="1">';
          elem.append(input);
          $compile(elem)(scope);
        });
    }