JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<div ng-app="myapp">
    <form name="myform" class="form-horizontal status" method="POST" autocomplete='off' ng-controller="ProductDetailsCtrl" >
        <div class="row">
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-2 custom-left">
                        <label>Product No:</label>
                    </div>
                    <div class="col-md-3">
                        <input type="number" class="form-control" name="Productid" ng-model="product.Id" style="width: 244px; margin-left: 10px" required="" ng-blur="getProduct()" />
                    </div>
                </div>
            </div>
        </div>
        <section class="panel panel-default">
            <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span>Purchase List</strong>

            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Product</th>
                                <th>Brand</th>
                                <th>Quantity</th>
                                <th>Color</th>
                                <th>Size</th>
                                <th>Retail Price</th>
                                <th>Discount</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr data-ng-repeat="Product in Products">
                                <td>{{Product.productId}}</td>
                                <td>{{Product.productName}}</td>
                                <td>{{Product.brandName}}</td>
 ...

JavaScript

var app = angular.module('myapp', [])
    .controller('ProductDetailsCtrl', function ($scope) {
    var productsList = [{
        "productId": 101,
            "productName": "AAA",
            "quantity": 2,
            "retailPrice": 100
    }, {
        "productId": 102,
            "productName": "ABB",
            "quantity": 3,
            "retailPrice": 200
    }];

    $scope.Products = [];
    $scope.getProduct = function () {
        $scope.Product = findElement(productsList,'productId', $scope.product.Id);
        $scope.Products.push($scope.Product);

    }

    function findElement(arr, propName, propValue) {
        for (var i = 0; i < arr.length; i++)
        if (arr[i][propName] == propValue) return arr[i];

        // will return undefined if not found; you could return a default instead
    }
})