I want to create 'n' red blocks with text (n here means the number of elements in array). But, I am getting a blank page.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
.card-main {
width: 100px;
height: 100px;
border: 1px solid red;
background-color: red;
}
</style>
<!-- look here start -->
<div class="card-main" ng-app="myApp" ng-controller="myCtrl" ng-repeat="x in type">
<p>{{x}}</p>
</div>
<!-- look here end -->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.type = ["Any", "T1", "T2", "T3"];
$scope.state = ["Any", "S1", "S2"];
});
</script>
</body>
</html>
ng-repeathas very high priority, it is applied beforeng-controllere.g.will render several divs with several controller instances, not several divs inside one controller.
To start, just put ng-app, ng-controller and ng-repeat on different elements: