AngularJS RangeError: Maximum call stack size exceeded using directive with Jquery

By using this directive:

.directive("materialSelect", ["$compile", "$timeout", function ($compile, $timeout) {
        return {
            link: function (scope, element, attrs) {
                if (element.is("select")) {
                    $compile(element.contents())(scope);
                    $timeout(function () {
                        element.material_select();
                    });
                    if (attrs.ngModel) {
                        scope.$watch(attrs.ngModel, function() {
                            element.material_select();
                        });
                    }
                }
            }
        }
    }]);

This is my module :

'use strict';

angular.module('sputnikApp.view1', ['ngRoute','ui.materialize.material_select'])

    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/view1', {
            templateUrl: 'view1/view1.html',
            controller: 'View1Ctrl'
        });
    }])

    .controller('View1Ctrl', ['$scope', function ($scope) {
        $scope.priorityChoices = [
            {value: 1, name: "Very high"},
            {value: 2, name: "High"},
            {value: 3, name: "Normal"},
            {value: 4, name: "Low"},
            {value: 5, name: "Very low"}
        ];

        $scope.myChoice = $scope.priorityChoices[2];

    }]);

This HTML in my view:

<select  id="priority" ng-model="myChoice" ng-options="p.value as p.name for p in priorityChoices track by p.value" material-select></select>

I'm getting this error:

RangeError: Maximum call stack size exceeded
    at HTMLOptionElement.n.event.dispatch (jquery.js:4403)
    at HTMLOptionElement.n.event.add.r.handle (jquery.js:4121)
    at Object.n.event.trigger (jquery.js:4350)
    at n.fn.extend.triggerHandler (jquery.js:4907)
    at Function.jQuery.cleanData (angular.js:1738)
    at n.fn.extend.remove (jquery.js:5258)
    at ngOptionsDirective.link.removeUnknownOption (angular.js:26105)
    at writeNgOptionsValue [as writeValue] (angular.js:26117)
    at selectDirective.link.ngModelCtrl.$render (angular.js:28054)
    at HTMLOptionElement.<anonymous> (angular.js:28173)

The directive comes from there.

This is the order in which my script are in index.html

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="bower_components/materialize/dist/js/materialize.js"></script>
<script type="text/javascript" src="bower_components/angular-materialize/src/angular-materialize.js"></script>

<script type="text/javascript" src="sputnikApp.js"></script>
<script type="text/javascript" src="view1/view1.js"></script>

JQuery Version is : 2.1.4 Angular Version is : 1.4.1

I have tried reordering the JavaScript, no putting the dependency in my module, coping the directive in my own code. I'm kinda new to this AngularJS business