Angularjs Repeat html input - angularjs

Question

I know this will be an easy Question but this is my first angular project
this it what i,m trying to do
<div class="switch-field">
<div class="switch-title">Three fields? Sure.</div>
<input type="radio" id="switch_3_left" name="switch_3" value="yes" checked />
<label for="switch_3_left">One</label>
<input type="radio" id="switch_3_center" name="switch_3" value="maybe" />
<label for="switch_3_center">Two</label>
<input type="radio" id="switch_3_right" name="switch_3" value="no" />
<label for="switch_3_right">Three</label>
</div>
</div>
Fiddle Link
this is my Datasource
this is my Code
<div class='row' ng-show="mk.selectedTypeAttributesID.length != 0">
<div class='col-xs-3 col-sm-3 col-md-3 col-lg-3' ng-repeat="att in mk.selectedTypeAttributesID">
<div class="switch-field">
<div class="switch-title">{{att.name}}</div>
<div ng-repeat="val in att.Values" >
<input class="bttn-input" type="radio" id="switch_{{val.val}}" name="switch_{{att.id}}" value="{{val.val}}" />
<label class="bttn-input" for="switch_3_{{val.val}}">{{val.val}}</label>
</div>
</div>
</div>
</div>
</div>
this is the html result
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 ng-scope" ng-repeat="att in selectedTypeAttributesID">
<div class="switch-field">
<div class="switch-title ng-binding">مقاس</div>
<!-- ngRepeat: val in att.Values -->
<div ng-repeat="val in att.Values" class="ng-scope">
<input class="bttn-input" type="radio" id="switch_43" name="switch_7" value="43">
<label class="bttn-input ng-binding" for="switch_3_43">43</label>
</div>
<!-- end ngRepeat: val in att.Values -->
<div ng-repeat="val in att.Values" class="ng-scope">
<input class="bttn-input" type="radio" id="switch_41" name="switch_7" value="41">
<label class="bttn-input ng-binding" for="switch_3_41">41</label>
</div>
<!-- end ngRepeat: val in att.Values -->
</div>
</div>
</div>
what i want is
1-that the inputs will be under the div "switch-field"
2- why every input in a div
thanks all

Answer 1

As mentioned in a comment, ng-repeat-start and ng-repeat-end are used in situations where you want to repeat more than just a single element. Here is a simple example for your situation using this approach. Rather than repeating on the <div>, use ng-repeat-start on the <input> and ng-repeat-end on the <label>. This will cause each set of <input> and <label> elements to be repeated as a single unit inside the <div>.
angular.module('app', [])
.controller('ctrl', ($scope) => {
$scope.att = {
name: 'SomeAtt',
id: 'SomeId',
Values: [{
val: 1
}, {
val: 2
}, {
val: 3
}]
};
});
.switch-field {
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
padding: 40px;
overflow: hidden;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
float: left;
}
.switch-field label {
display: inline-block;
width: 60px;
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
font-weight: normal;
text-align: center;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked+label {
background-color: #A5DC86;
-webkit-box-shadow: none;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class='row'>
<div class='col-xs-3 col-sm-3 col-md-3 col-lg-3'>
<div class="switch-field">
<div class="switch-title">{{att.name}}</div>
<div>
<input ng-repeat-start="val in att.Values" class="bttn-input" type="radio" id="switch_{{val.val}}" name="switch_{{att.id}}" value="{{val.val}}" />
<label ng-repeat-end class="bttn-input" for="switch_{{val.val}}">{{val.val}}</label>
</div>
</div>
</div>
</div>
</div>