Angularjs Select doesn't seem to update ng-model when option chosen - angularjs

Question

I have two SELECTs on a page. They both load the possible options correctly and the ng-model appears to set properly as the initial value is set based on values in the model when loaded. I want to be able to make sure that the user does not choose a value for both of the SELECTs so I added a function for the ng-click. Inside the function I check if one was initially set that the other model does not now have a value. The problem I am facing is that when I get into the function, the models don't appear to be reflecting what the user has chosen.
I looked at a lot of questions on here and found solutions that indicated that the ng-options probably needed some changes. I have tried what I have seen, but nothing seems to be helping.
Here are the two HTML SELECTs
<select ng-model="example3model" class="form-control input-md" ng-click="checkTags(3)" ng-options="industry as industry.text group by industry.group for industry in industryData track by industry.id" >
<option value="">-- Select Industry --</option>
</select>
<select ng-model="example4model" class="form-control input-md" ng-click="checkTags(4)" ng-options="product as product.text group by product.group for product in productData track by product.id" >
<option value="">-- Select Product --</option>
</select>
Both arrays (industryData and productData) look similar (different actual values) and look like this:
industrydata is an array of about 28 objects like these 3...
{group: "Energy and Natural Resources", id: "5", text: "Chemicals"}
{group: "Consumer Industries", id: "6", text: "Consumer Products"}
{group: "Public Services", id: "7", text: "Defense Security"}
If I look at the model of one of the selects if initially set with values it looks like: (this is for an 'example4model'
Object
group : "Finance"
id : "34"
text : "Governance, Risk, and Compliance"
My function snippet looks like this:
$scope.checkTags = function(curModel) {
if (curModel == 3) {
if ($scope.example4model != null && $scope.example4model.text != '' && $scope.example3model != null) {
$rootScope.showMsg("Remove Product before adding an Industry.");
$scope.example3model = null;
}
} else {
if ($scope.example3model != null && $scope.example3model.text != '' && $scope.example4model != null) {
$rootScope.showMsg("Remove Industry before adding a Product.");
$scope.example4model = null;
}
}
};
If example4model is set initially, and I try to choose a value from the example3model select, I would think when I come into the function, I should see some value in example3model, but it is null. If I change the option chosen for example4model, when I come into the function, it shows the initial value and not the newly selected one.
It seems that somehow the model is not being updated to show the chosen options but I can't figure out why. Based on responses to other questions, I added the 'as' clause and the 'track by' clauses but that didn't help either.
Any help would be appreciated.

Answer 1

So I drew up a sample of your provided snippets in Plunker (bottom of post)...
Have you tried initializing your models with null?
What may be causing the issue on your end (if I understand the issue correctly) is that your models will be undefined before being set using the <select>. And in your checkTags() method, you are checking for "not null".
I suggest declaring your models in your controller like so:
$scope.example3model = null;
$scope.example4model = null;
This should allow your checkTags() if statements to catch the model values before being set. Alternatively, you can change your if statements to check for whether the model is "undefined" instead.
Other Recommendations
I also might recommend changing ng-click to ng-change -- ng-click will fire your checkTags() function whenever the <select> is clicked whereas ng-change just fires it when an option is selected.
In your checkTags() if statements, you can null check with a simple if($scope.example3model) -- check my snippet for those (line 43).
Don't forget to use !== when you are checking a value and looking for a truthy / falsy (bool) evaluation.
Plunker
https://embed.plnkr.co/mUgsqY/
Wrap checkTags() in a $timeout:
// In your HTML
<select ng-model="example3model" ng-click="initiateCheckTags(3)">
<option value="">-- Select Industry --</option>
</select>
// In your Controller
$scope.initiateCheckTags = function(curModel) {
$timeout(function() {
$scope.checkTags(curModel);
}, 100);
}