<html>
<head>
<title>HTML Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="hover-id">
Hello World
</div>
<script>
jQuery(document).ready(function($){
$(document).on('mouseover', '#hover-id', function(){
$(this).css('color','yellowgreen');
});
$(document).on('mouseout', '#hover-id', function(){
$(this).css('color','black');
});
});
</script>
</body>
</html>
Please pre defile your values in controller what you selected.
var app = angular.module('testApp', []);
app.controller('testController', ['$scope', function($scope) {
/* Pre defile values if you are not seleted than blank pass*/
$scope.myDropDown = 'two';
/* ng-options values pre define */
$scope.names = ["one", "two", "three"];
$scope.listing_type_id = 3;
$scope.listingTypes = [
{"id" : 1, "name" : "one"},
{"id" : 2, "name" : "two"},
{"id" : 3, "name" : "three"}
];
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testController as $ctrl">
<div>
Simple select dropdown :
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</div>
<!-- ng-option to set values from controller and pre define selected values -->
<div>
ng-option :
<select ng-model="myDropDown" ng-options="item for item in names"></select>
</div>
<div ng-if="myDropDown == 'two' || myDropDown == 'three'">
<!-- Will be displayed only when you select 'two' or 'three' -->
<input type="text" ng-model="fname" />
</div>
<div>
Your Code ng-option :
<select name="listing_type_id" ng-model="listing_type_id" ng-options="i.id as i.name for i in listingTypes"></select>
</div>
</div>