OnClick radio button show hide div angular js

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>