OnClick radio button show hide div angular js - angularjs

Question

My code is ,
<form name="myForm" ng-controller="Ctrl">
<input type="radio" ng-model="color" value="red"> Red <br/>
<input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
<input type="radio" ng-model="color" value="blue"> Blue <br/>
</form>
<div id="reddiv">Red Selected</div>
<div id="greendiv">Green Selected</div>
<div id="bluediv">Blue Selected</div>
my script is
function Ctrl($scope) {
$scope.color = 'blue';
if ($scope.color == 'blue') {
//blue div show
}
else if($scope.color == 'green') {
//green div show
}
else {
//red div show
}
}
i need to show based on radio button click , I tried a piece of code above i given , any idea

Answer 1

You are trying to change the view directly from your controller. This is not the angular way. Pull the model state from the view out of the controller. For example:
<div ng-show="color == 'red'">Red Selected</div>
<div ng-show="color == 'green'">Green Selected</div>
<div ng-show="color == 'blue'">Blue Selected</div>

Answer 2

Angular way would be to use ngShow/ngHide/ngIf directives to show corresponding div. Consider this example:
app.controller('Ctrl', function($scope) {
$scope.color = 'blue';
$scope.isShown = function(color) {
return color === $scope.color;
};
});
HTML:
<div ng-show="isShown('red')">Red Selected</div>
<div ng-show="isShown('green')">Green Selected</div>
<div ng-show="isShown('blue')">Blue Selected</div>
Demo: http://plnkr.co/edit/yU6Oj36u9xSJdLwKJLTZ?p=preview
Also very important that ng-controller="Ctrl" should be moved higher then your form, because dives should be in the same scope.