$apply already in progress error occurs when reset other select box - angularjs

Question

Please check my snippet. I am using the custom select box. And try to reset on other select box selection. To change got an error. Please help where I am wrong and what is the correct way. Thanks in advance.
$(document).on("click focus", ".sbSelector, .sbToggle", function() {
$(this).closest(".sbHolder").prev("select").trigger("click");
});
var app = angular.module('app', []);
app.controller('appController', ['$scope', function($scope) {
$scope.allTheme = [{
"theme_id": 2,
"productData": [{
"store_id": 1,
"product_id": 3,
"style_id": 1,
"size_id": 3,
"theme_id": 2,
"name": "Boy - FD",
}, {
"store_id": 1,
"product_id": 4,
"style_id": 1,
"size_id": 3,
"theme_id": 2,
"name": "Boy - FE"
}, {
"store_id": 1,
"product_id": 8,
"style_id": 1,
"size_id": 3,
"theme_id": 2,
"name": "Boy - QS",
}]
}, {
"theme_id": 5,
"productData": [{
"store_id": 1,
"product_id": 99,
"style_id": 1,
"size_id": 3,
"theme_id": 5,
"name": "Blank - FD"
}, {
"store_id": 1,
"product_id": 100,
"style_id": 1,
"size_id": 3,
"theme_id": 5,
"name": "Blank - FE"
}, {
"store_id": 1,
"product_id": 101,
"style_id": 1,
"size_id": 3,
"theme_id": 5,
"name": "Blank - QS"
}]
}, {
"theme_id": 7,
"productData": [{
"store_id": 1,
"product_id": 129,
"style_id": 1,
"size_id": 3,
"theme_id": 7,
"name": "Nautical"
}]
}, {
"theme_id": 10,
"productData": [{
"store_id": 1,
"product_id": 12,
"style_id": 1,
"size_id": 3,
"theme_id": 10,
"name": "Girl - FD"
}, {
"store_id": 1,
"product_id": 13,
"style_id": 1,
"size_id": 3,
"theme_id": 10,
"name": "Girl - FE"
}, {
"store_id": 1,
"product_id": 17,
"style_id": 1,
"size_id": 3,
"theme_id": 10,
"name": "Girl - QS"
}]
}];
$scope.targetField = null;
$scope.selectBoxClick = function($event) {
if ($event.target === null) {
return;
}
$scope.targetField = $event.target;
}
$scope.changeTheme = function(theme, selectedProducts) {
$scope.activeTheme = theme;
if (selectedProducts) {
$scope.isSizedAndThemeSelected = true;
$($scope.targetField).closest(".owl-item").siblings().each(function() {
if ($(this).find("select").length) {
var option = $(this).find("select option").eq(0);
$(this).find("select").selectbox("change", option.attr('value'), option.html());
}
})
} else {
$scope.isSizedAndThemeSelected = false;
$scope.activeTheme = {};
}
}
}]);
app.directive('customSelect', ['$timeout', function($timeout) {
return {
restrict: 'C',
transclude: false,
link: function(scope, element) {
scope.initSelectbox = function(element) {
$timeout(function() {
element.selectbox();
}, 0)
}
}
};
}]).directive('customSelectItem', [function() {
return {
restrict: 'A',
transclude: false,
link: function(scope, element) {
if (scope.$last) {
scope.initSelectbox(element.parent());
}
}
};
}]);
.sbHolder {
font-size: 14px;
position: relative;
height: 50px;
}
.sbSelector>a {
color: #fff;
text-decoration: none;
display: block;
}
.sbSelector {
display: block;
height: 31px;
left: 0;
line-height: 19px;
overflow: hidden;
position: absolute;
text-indent: -22px;
top: 0;
width: 100%;
cursor: pointer;
color: #fff;
background: #fdb400;
display: inline-table;
text-indent: 0;
cursor: pointer;
}
.sbToggle {
display: block;
height: 30px;
outline: none;
position: absolute;
right: 0;
top: 2px;
width: 30px;
background-size: 16px;
z-index: 9;
cursor: pointer;
}
.sbOptions {
background: #fff;
border: solid 1px #dfdfdf;
list-style: none;
left: 0;
margin: 0;
padding: 4px 14px 10px 12px;
position: absolute;
width: 100%;
z-index: 1;
overflow-y: auto;
top: auto;
text-align: left;
}
.sbOptions li {
padding: 0px 0px;
}
.sbOptions li img {
display: inline-block;
float: left;
padding-top: 7px;
padding-left: 3px;
}
.sbOptions a {
border-bottom: solid 1px #e9e9e9;
display: block;
outline: none;
padding: 7px 0 1px 0;
color: #545454;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
}
.sbOptions a:link,
.sbOptions a:visited {
color: #696969;
font-size: 12px;
background: #fff;
text-decoration: none;
transition: all 0.2s ease-in-out;
font-weight: 300;
display: block;
padding-left: 0;
}
.sbOptions a:hover,
.sbOptions a:focus,
.sbOptions a.sbFocus {
color: #545454;
font-weight: 600;
}
.sbOptions li.last a {
border-bottom: none;
}
.sbOptions .sbDisabled {
border-bottom: dotted 1px #515151;
color: #999;
display: block;
padding: 7px 0 7px 3px;
}
.sbOptions .sbGroup {
border-bottom: dotted 1px #515151;
color: #EBB52D;
display: block;
font-weight: bold;
padding: 7px 0 7px 3px;
}
.sbOptions .sbSub {
padding-left: 17px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://project-progress.net/projects/kodak-express-local-angular/js/jquery.selectbox-0.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div data-ng-app="app">
<div data-ng-controller="appController">
<div data-ng-repeat="theme in allTheme" style="width:500px;" class="owl-item">
<div class="select-box" data-ng-if="theme.productData.length > 1">
<select class="customSelect" data-ng-model="theme.SelectedProduct" data-ng-click="selectBoxClick($event)" data-ng-change="changeTheme(theme, theme.SelectedProduct)">
<option value="">Select an option</option>
<option data-custom-select-item data-ng-repeat="product in theme.productData" data-ng-value="{{product}}">{{product.name}}</option>
</select>
</div>
</div>
</div>
</div>

Answer 1

Do not use any variables with $$ at their beginning since they are regarded as strictly internal and private variables.
If you need to trigger a digest loop from jQuery callbacks for example, use this pattern:
scope.$applyAsync(function () {
// the code updating any other scope stuff
});
The advantage of giving it a callback function is that it will provide you a full stack trace if any error inside the function occurs.