using angularjs directive for icheck plugin


I've a problem with my Angularjs app, cannot figure out where is the problem.

check it on plunker Here

when I click the button it should run the iCheck() plugin, but it doesn't

Problem courtesy of: Ahmed Hashem


You should do one thing in order to get everything working: force AngularJS to actually use jQuery.

AngularJS includes jQlite in its source code, but it's not the same as jQuery. If you include jQuery before angular.js then Angular will use it instead of own implementation.

Thus just change this in index.html:

<script data-require="jquery@*" data-semver="2.0.3" src=""></script>
<script data-require="angular.js@*" data-semver="1.2.9" src=""></script>

(jQuery is before angular.js)

working Plunker

Solution courtesy of: Michał Miszczyszyn


A better iCheck directive can be found here: (wajatimur)

return {
    require: 'ngModel',
    link: function($scope, element, $attrs, ngModel) {
        return $timeout(function() {
            var value;
            value = $attrs['value'];

            $scope.$watch($attrs['ngModel'], function(newValue){

            return $(element).iCheck({
                checkboxClass: 'icheckbox_flat-aero',
                radioClass: 'iradio_flat-aero'

            }).on('ifChanged', function(event) {
                if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {
                    $scope.$apply(function() {
                        return ngModel.$setViewValue(;
                if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {
                    return $scope.$apply(function() {
                        return ngModel.$setViewValue(value);
Discussion courtesy of: perfect_element

This recipe can be found in it's original form on Stack Over Flow.