How to pass data in angular 1.x - html

Question

How can I pass the data in my ng-repeat to a data-attribute?
Please see below what I'm aiming for.
Sorry for the poor format this is my first time posting to StackOverflow.
<div class="row">
<div class="col-md-3" ng-repeat="p in controller.prod | filter:{state:'California'}">
<div class="card">
<div class="card-block">
<h3 class="card-title">{{p.productName}}</h3>
<h6 class="card-subtitle text-muted">${{p.price}}</h6>
<img ng-src="{{p.productImage}}" class="img-fluid">
</div>
<div class="card-block">
<div class="card-text">Product information<a
href="#"
class="card-link productItem btn btn-primary"
<!--Below is what i'm trying to accomplish -->
data-name="{{p.productName}}"
data-s="black"
data-price="{{p.price}}"
data-id="1">Add to Cart</a>
</div>
<br />
</div>
</div>
</div>
</div>

Answer 1

you have to assign one array in $scope in your controller and after that bind it with ng-reapeat in your html template like this:
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
});
your template:
<h1 ng-repeat="x in records">{{x}}</h1>