This question has already been answered:

The ng-switch value is not displayed, what could be the problem?

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>HomeWork #3</title> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css"> <script> var app = angular.module('myApp', []) .controller('mainCtrl', function ($scope) { $scope.items = [ { question: "Question 1", answer: ["1", "2", "3", "4"] }, { question: "Question 2", answer: ["1", "2", "3", "4"] }, ]; }) </script> </head> <body ng-controller="mainCtrl"> <div class="ui container"> <h1>HomeWork #3</h1> <div ng-repeat="item in items" class="ui radio checkbox"> <input ng-model="number" value="{{$index}}" name="radio" type="radio"> <label>{{item.question}}</label> </div> <div ng-switch on="number"> <div ng-switch-when="0"> 1 </div> <div ng-switch-when="1"> 2 </div> </div> </div> </body> </html>

Reported as a duplicate by members of Grundy , aleksandr barakin , user194374, Denis , Bald Aug 24 '16 at 10:01 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    1 answer 1

    The error lies in the fact that ng-repeat creates its own skop. Therefore, when using ng-model="number" , the number variable will be created in the ng-repeat group, and it will not be accessible outside of it.

    The usual solution is to use dot rule , which states that there must be a dot in the expression used in the ng-model directive.

    For example:

     var app = angular.module('myApp', []) .controller('mainCtrl', function($scope) { $scope.items = [{ question: "Question 1", answer: ["1", "2", "3", "4"] }, { question: "Question 2", answer: ["1", "2", "3", "4"] }, ]; }) 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css"> <div ng-app="myApp"> <div ng-controller="mainCtrl as c"> <div class="ui container"> <h1>HomeWork #3</h1> <div ng-repeat="item in items" class="ui radio checkbox"> <input ng-model="c.number" value="{{$index}}" name="radio" type="radio"> <label>{{item.question}}</label> </div> <div ng-switch on="c.number"> <div ng-switch-when="0"> 1 </div> <div ng-switch-when="1"> 2 </div> </div> </div> </div> </div>