ng-change blanking out dropdown - angularjs

Question

I have this drop down setup like this:
<div class="col-sm-2">
<select class="form-control" name="dataType" id="dataType"
ng-model="dataTypes"
ng-change="typeCheck()">
<option ng-repeat="option in dataTypes" value="{{option.id}}">{{option.name}}</option>
</select>
</div>
In my controller I have this function:
$scope.typeCheck = function () {
alert($scope.dataTypes);
};
After this function is called, sometimes my list disappears! I say sometimes as because it is only on certain elements that get called.
This is my array that gets loaded into the dropdown:
$scope.typeArrays = function () {
var vm = this;
vm.dataTypes = [];
vm.dataTypes = [
{ id: 'bigint', name: 'bigint' },
{ id: 'binary', name: 'binary' },
{ id: 'bit', name: 'bit' },
{ id: 'char', name: 'char' },
{ id: 'date', name: 'date' },
{ id: 'datetime', name: 'datetime' },
{ id: 'datetime2', name: 'datetime2' },
{ id: 'datetimeoffset', name: 'datetimeoffset' },
{ id: 'decimal', name: 'decimal' },
{ id: 'float', name: 'float' },
{ id: 'image', name: 'image' },
{ id: 'int', name: 'int' },
{ id: 'money', name: 'money' },
{ id: 'nchar', name: 'nchar' },
{ id: 'ntext', name: 'ntext' },
{ id: 'numeric', name: 'numeric' },
{ id: 'nvarchar', name: 'nvarchar' },
{ id: 'real', name: 'real' },
{ id: 'smalldatetime', name: 'smalldatetime' },
{ id: 'datetimeoffset', name: 'datetimeoffset' },
{ id: 'smallint', name: 'smallint' },
{ id: 'smallmoney', name: 'smallmoney' },
{ id: 'sql_variant', name: 'sql_variant' },
{ id: 'text', name: 'text' },
{ id: 'time', name: 'time' },
{ id: 'tinyint', name: 'tinyint' },
{ id: 'uniqueidentifier', name: 'uniqueidentifier' },
{ id: 'varbinary', name: 'varbinary' },
{ id: 'varchar', name: 'varchar' }
];
}
Here is a fiddle of my code.

Answer 1

You were pretty close, there was a little misconception about the models but this way, you set a dataType using ng-model and ng-change alerts the chosen dataType.
$scope.dataType = null;
$scope.dataTypes = [
{ id: 'bigint', name: 'bigint' },
{ id: 'binary', name: 'binary' },
{ id: 'bit', name: 'bit' },
{ id: 'char', name: 'char' },
{ id: 'date', name: 'date' },
{ id: 'datetime', name: 'datetime' },
{ id: 'datetime2', name: 'datetime2' },
{ id: 'datetimeoffset', name: 'datetimeoffset' },
{ id: 'decimal', name: 'decimal' },
{ id: 'float', name: 'float' },
{ id: 'image', name: 'image' },
{ id: 'int', name: 'int' },
{ id: 'money', name: 'money' },
{ id: 'nchar', name: 'nchar' },
{ id: 'ntext', name: 'ntext' },
{ id: 'numeric', name: 'numeric' },
{ id: 'nvarchar', name: 'nvarchar' },
{ id: 'real', name: 'real' },
{ id: 'smalldatetime', name: 'smalldatetime' },
{ id: 'datetimeoffset', name: 'datetimeoffset' },
{ id: 'smallint', name: 'smallint' },
{ id: 'smallmoney', name: 'smallmoney' },
{ id: 'sql_variant', name: 'sql_variant' },
{ id: 'text', name: 'text' },
{ id: 'time', name: 'time' },
{ id: 'tinyint', name: 'tinyint' },
{ id: 'uniqueidentifier', name: 'uniqueidentifier' },
{ id: 'varbinary', name: 'varbinary' },
{ id: 'varchar', name: 'varchar' }
];
$scope.colOptions= [];
$scope.colOptions= [
{ id: '1', name: 'identity(1,1)' },
{ id: '2', name: 'constraint' }
];
$scope.typeCheck = function () {
alert($scope.dataType);
};
fiddle https://jsfiddle.net/5extmuqg/

Answer 2

#webdad3, cool. thanks for the fiddle.
This can be fixed with a couple of small changes. vm.datatypes (in your function) should become $scope.dataTypes. ANd the ng-model in your select should be dataType, NOT dataTypes. Lastly, in typeCheck(), also refer to $scope.dataType (singular).
the vm. notation is usually used when you want to use controller-as syntax rather than $scope. Since you're using $scope, just stick with that. And the ng-model for the <select> element should be the object you want to set, not the object providing the list of options.
Working Fiddle
Hope this helps