AngularJS UniformJS Select Control not updating

Question

I'm building an application using AngularJS and UniformJS. I'd like to have a reset button on the view that would reset my select's to their default value. If I use uniform.js, it isn't working.

You can examine it here:

http://plnkr.co/edit/QYZRzlRf1qqAYgi8VbO6?p=preview

If you click the reset button continuously, nothing happens. If you remove the attribute, therefore no longer using uniform.js, everything behaves correctly.

Thanks

UPDATE:

Required the use of timeout.

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.reset = function() {
    $scope.test = "";
    $timeout(jQuery.uniform.update, 0);
  };
});

Answer 1

Found it. For the sake of completeness, I'm copying my comment here:

It looks like Uniform is really hacky. It covers up the actual select element, and displays span instead. Angular is working. The actual select element's value is changing, but the span that Uniform displays is not changing.

So you need to tell Uniform that your values have changed with jQuery.uniform.update. Uniform reads the value from the actual element to place in the span, and angular doesn't update the actual element until after the digest loop, so you need to wait a little bit before calling update:

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.reset = function() {
    $scope.test = "";
    $timeout(jQuery.uniform.update, 0);
  };
});

Alternatively, you can put this in your directive:

app.directive('applyUniform',function($timeout){
  return {
    restrict:'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      element.uniform({useID: false});
      scope.$watch(function() {return ngModel.$modelValue}, function() {
        $timeout(jQuery.uniform.update, 0);
      } );
    }
  };
});

Answer 2

Just a slightly different take on @john-tseng's answer. I didn't want to apply a new attribute to all my check-boxes as we had quite a few in the application already. This also gives you the option to opt out of applying uniform to certain check-boxes by applying the no-uniform attribute.

/*
 * Used to make sure that uniform.js works with angular by calling it's update method when the angular model value updates.
 */
app.directive('input', function ($timeout) {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, element, attr, ngModel) {
            if (attr.type === 'checkbox' && attr.ngModel && attr.noUniform === undefined) {
                element.uniform({ useID: false });
                scope.$watch(function () { return ngModel.$modelValue }, function () {
                    $timeout(jQuery.uniform.update, 0);
                });
            }
        }
    };
});