Setting 'select' as default value in dropdown using angularjs - html

Question

I am trying to make a simple dropdown using angularjs and want to invoke a function when the dropdown value is changed. Only when the dropdown selection is 'A', i want to display some other elements(say 'hello') in my page.
Here is the jsfiddle http://jsfiddle.net/gkJve/932/.
Html
<div ng-controller="Ctrl">
<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.name for obj in list_categories" ng-change="DropDownChange()">
<option value="">Select</option>
</select>
<div ng-show="showdiv">
Hello
</div>
<div>
Angular
var app = angular.module('app', []);
$scope.showdiv=false;
function Ctrl($scope) {
$scope.list_categories = [{
id: 'id1',
name: 'A'
}, {
id: 'id2',
name: 'B'
}];
$scope.DropDownChange = function() {
$scope.showdiv = angular.equals($scope.list_category.name,'A');
}
}
Result - 'Hello' is displayed when 'A' is selected and hidden when 'B' is selected. But the problem is, if I select 'A' and then change my selection to 'Select', 'hello' is still displayed. I think its because 'select' is not one of my model data value the comparison is failing. Is there any other way to make this work without adding 'select' to my model data?

Answer 1

use like this
<div ng-show="list_category.name == 'A'">

Answer 2

var app = angular.module('app', []);
$scope.showdiv=false;
function Ctrl($scope) {
$scope.list_categories = [{
id: 'id1',
name: 'A'
}, {
id: 'id2',
name: 'B'
}];
$scope.DropDownChange = function() {
if($scope.list_category == null || $scope.list_category == "")
{
$scope.showdiv = false;
}
else{
$scope.showdiv = angular.equals($scope.list_category.name,'A');
}
}
}
Fiddle