JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="myCtrl">

  <form>
    <p>Product:
      <input type="text" ng-model="nameProduct">
    </p>
    <p>Price:
      <input type="number" ng-model="priceProduct">
    </p>
    <input type="submit" value="Add" ng-click="addProduct()">
  </form>



  <div class="product" ng-repeat="product in products">
    <div class="name">{{product.name}}</div>
    <div class="price">${{product.price}}</div>
  </div>
</div>

JavaScript

var app = angular.module('myApp', []);
 app.controller("myCtrl", function($scope) {

   $scope.products = [{
     name: 'Apple',
     price: 5,
     img: '/Apple.jpg'
   }, {
     name: 'Banana',
     price: 3.7,
     img: '/Banana.jpg'
   }, {
     name: 'Grapes',
     price: 10,
     img: '/Grapes.jpg'
   }];
   $scope.addProduct = function() {

     $scope.products.push({
       name: $scope.nameProduct,
       price: $scope.priceProduct,
       tmuna: $scope.imgProduct
     });
     $scope.nameProduct = "";
     $scope.priceProduct = "";
     $scope.imgProduct = "";

   };



 });