angle/angle-material：HTMLスライダを置き換えてもng-modelが更新されない

Question

$scope.$watch("checkbox", function(newVal, oldVal, scope) { 
    var newmax = calcNewMax(); 
    var slider = angular.element(document.querySelector("#slider")); 
    var parent = slider.parent(); 
    slider.remove(); 
    var newSlider = '<md-slider id="slider" flex="100" class="md-warn" md-discrete ng-model="size" step="10" min="100" max="' + newmax + '" aria-label="rating"> </md-slider>'; 
    parent.prepend($compile(newSlider)($rootScope)); 
    $scope.size = 500; 
       }); 

角度のある材料のmd-sliderを使用しています。 私が実際に欲しいのは、チェックボックスを介してユーザーの選択に基づいてスライダの最大値を更新することです。 max属性の新しい値を設定するだけで初めての試みは機能しませんでした（aria-valuemaxでも機能しませんでした）。

そこで、完全なスライダを削除して置き換えることにしました。 上記のコードが動作します。

しかし、私が新しいスライダを追加すると、$scope.sizeにバインドされたng-modelはもう同期されていないようです（私はその値にバインドするラベルを持ち、更新しません）。もちろん、私は既に$watchにいるので、$apply()は機能しません。

Answer 1

私はあなたの最初の試みに何を望むかやってみました、それが動作します：

<md-slider step="1" md-discrete min="0" max="{{max}}" ng-model="value"></md-slider> 
<md-checkbox ng-model="max" ng-true-value="20" ng-false-value="{{baseMax}}"> 
     max 20 
</md-checkbox> 
<md-checkbox ng-model="max" ng-true-value="40" ng-false-value="{{baseMax}}"> 
     max 40 
</md-checkbox> 
<md-checkbox ng-model="max" ng-true-value="60" ng-false-value="{{baseMax}}"> 
     max 60 
</md-checkbox> 

このplunkerを見て、あなたのソリューションで https://plnkr.co/edit/BAM5ToIzZDUoqWPcQlWA?p=preview