Need Help to show multiple div by a radio button in angular js

Question

I need some help to show multiple data by clicking a radio button.

My code: html

<input type="radio" ng-model="opportunity" name="buy" value="buy">Buy
<input type="radio" ng-model="opportunity" name="services" value="services">Services
<input type="radio" ng-model="opportunity" name="social" value="social">Social

<div ng-show="isShown('buy')"> Test1 </div> // when radio button 1 is active
<div ng-show="isShown('services')"> Test2 </div> // when radio button 2 is active
<div ng-show="isShown('social')"> Test3 </div> // when radio button 3 is active

<div ng-show="isShown('buy')"> Test4 </div> // when radio button 1 is active
<div ng-show="isShown('services')"> Test5 </div> // when radio button 2 is active
<div ng-show="isShown('social')"> Test6 </div>// when radio button 3 is active

Angular Js:

$scope.opportunity = '';

$scope.isShown = function(opportunity) {
return opportunity === $scope.opportunity;
};

When I run this code Test1 or Test2 or Test3 is shown. But Test4, Test5, Test6 will not show. How can I solve this problem

Answer 1

I've recreated your code in plunker: http://plnkr.co/edit/xh4p9i1jpPl03bBH6K6P?p=preview

It works perfectly so i got a feeling that your last 3 divs weren't wrapped by controller