title: How to create dynamic scope variables in Angularjs?
body: <p><img src="https://i.stack.imgur.com/EQHsF.png" alt="Here I added image"></p>
  
  <p>I want create the screen like this.</p>
  
  <p>The select dropdowns and input fields should not effect on each other (right now if I select company, that is showing as selected in the next set, it should not like that). How can I implement this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';
  
  angular.module('newmonthlyplanning.controllers', [])
  
   .controller('newmonthlyplanningCtrl', ['$scope','$window', '$state', 'serviceFactory', '$compile', '$interval','targetPlanningService',
      function ($scope,$window,$state, serviceFactory, $compile,$interval,targetPlanningService) {
        
        $scope.status = '200';
           $scope.months = ['Jan','Feb','Mar','Apr','May','June','July','Aug','Sep','Oct','Nov','Dec'];
          
           $scope.getAllSectors = function(){
  
                targetPlanningService.getAllsectors().then(function (response) {
                $scope.status = response.status;
                console.log(response);
                if (response.status === 200) {
                   $scope.sectors  =  response.data.sector_list;
                }
                else {
                 
                }
              }, function (response) {       
                console.log(response);
                 if (response.status === 401) {
                       $state.go('login');
                    }
              });
  
              };
  
               $scope.getcustomers = function(sector){
                
                 console.log("selected sector ",sector);
                targetPlanningService.getAllCustomers(sector).then(function (response) {
                $scope.status = response.status;
                console.log(response);
                if (response.status === 200) {
                   $scope.customers  =  response.data.customer_list;
                }
                else {
  
                }
                 
                
              }, function (response) {       
                console.log(response);
                if (response.status === 401) {
                       $state.go('login');
                    }
              });
  
              };
  
              $scope.targetDetails = [];
              $scope.getAllCompanies = function(){
  
                targetPlanningService.getAllCompanies().then(function (response) {
                $scope.status = response.status;
                console.log("companies---&gt; ",response);
                if (response.status === 200) {
                   $scope.companies  =  response.data.companies;
                   
                 $scope.targetDetails.push({'companies':$scope.companies,'sectors': $scope.sectors ,'customers': $scope.customers ,'targetss': $scope.targets});
                }
                else {
  
                }
                    
                
              }, function (response) {       
                console.log(response);
                if (response.status === 401) {
                           $state.go('login');
                         }  
              });
  
              };
  
  
               $scope.getAllproductIds = function(){
               /*  var details = {
                  'company' : $scope.targetDetails.company,
                  'sector'  : $scope.targetDetails.sector
                 }
             console.log("details---&gt;",details);*/
             console.log("$scope.targetDetails.company---&gt;",$scope.targetDetails.company);
                targetPlanningService.getAllproductIds($scope.targetDetails.company).then(function (response) {
                $scope.status = response.status;
                console.log("product_ids---&gt;",response);
                if (response.status === 200) {
                   $scope.productids  =  response.data.item_list;
                }
                else 
                  {
                      
                    }
                
              }, function (response) {       
                console.log(response);
                if (response.status === 401) {
                       $state.go('login');
                    }
              });
  
              };
  
          $scope.targets = [{'pid': '','week1': '', 'week2': '','week3':'','week4':''}];
          
          var i=1;
       $scope.addNewChoice = function(id) {
       
           $scope.targetDetails;
                     i++;
                      $scope.targets.push({'pid': '','week1': '', 'week2': '','week3':'','week4':''});
                  
        
       };
  
      $scope.removeChoice = function(val) {
  
         console.log("index------&gt;",val);
                  $scope.targets.splice(val,1);
  
       };
      //$scope.targetDetails = [];
     
       console.log("companies at targetDetails------&gt;",$scope.companies);
      var i =0;
          $scope.addorder = function(){
            var object = {};
            object['targetss'] = $scope.targets;
            // $scope.targetDetails.push({'companies':$scope.companies,'sectors': $scope.sectors ,'customers': '','targetss': $scope.targets});
             $scope.targetDetails.push(object);
            
       }; 
  
             $scope.init = function () {  
                 console.log("present state...",$state.current.name);
                    if($state.current.name==="monthly"){
                       $scope.getAllSectors();
                       // $scope.getnumberOfweeks();
                         $scope.getAllCompanies();
                        //  $scope.getTargetDetails();
                          //$scope.getCommentDetails();
  
                      }
  
               
               };
  
                $scope.init();
  
  
  
    }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 0px" ng-repeat="details in targetDetails"&gt;
        &lt;div class="row"&gt;
        &lt;table class="table table-bordered"&gt;
           &lt;thead&gt;
             &lt;tr&gt;
               &lt;th&gt;Company&lt;/th&gt;
               &lt;th&gt;Sector&lt;/th&gt;
               &lt;th&gt;Customer&lt;/th&gt;
             &lt;/tr&gt;
           &lt;/thead&gt;
           &lt;tbody&gt;
             &lt;tr &gt;
          &lt;td&gt;
          
               &lt;div&gt;
           &lt;select class="form-control"  data-ng-model="targetDetails.company" ng-change="getAllproductIds()" style="border: 1px solid skyblue;"&gt;
            &lt;option value=""&gt;Select Company&lt;/option&gt;
            &lt;option ng-repeat="company in details.companies track  by $index" value="{{company}}" &gt;{{company}}&lt;/option&gt;
           &lt;/select&gt;
           &lt;/div&gt;
             &lt;/td&gt;
            
           &lt;td &gt;
           
               &lt;div &gt;
                             &lt;select class="form-control"  data-ng-model="targetDetails.sector" ng-change="getcustomers(targetDetails.sector)" style="border: 1px solid skyblue;"&gt;
               &lt;option value=""&gt;Select Sector&lt;/option&gt;
            &lt;option ng-repeat=" sector in details.sectors track  by $index" value="{{sector}}"&gt;{{sector}}&lt;/option&gt;
           &lt;/select&gt;
           &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
          
               &lt;div &gt;
                             &lt;select class="form-control"  data-ng-model="targetDetails.customer" style="border: 1px solid skyblue;"&gt;
                  &lt;option value="Customer"&gt; Customer&lt;/option&gt;
            &lt;option ng-repeat=" customer in details.customers track  by $index" value="{{customer}}"&gt;{{customer}}&lt;/option&gt;
           &lt;/select&gt;
           &lt;/div&gt;
          &lt;/td&gt;   
             &lt;/tr&gt;
           &lt;/tbody&gt;
         &lt;/table&gt; 
      &lt;/div&gt;
  
     &lt;div class="row"  style="padding: 0px"&gt;   
     
      &lt;table class="table table-bordered"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Product Id&lt;/th&gt;
            &lt;th &gt;WEEK1&lt;/th&gt;
            &lt;th &gt;WEEK2&lt;/th&gt;
            &lt;th &gt;WEEK3&lt;/th&gt;
            &lt;th &gt;WEEK4&lt;/th&gt;
           &lt;!--  &lt;th&gt;Total&lt;/th&gt; --&gt;
           &lt;!--  &lt;th&gt;Status&lt;/th&gt; --&gt;
            &lt;th &gt;Action&lt;/th&gt;
  
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr data-ng-repeat="target in details.targetss"&gt;
         &lt;td align="center" &gt;
         &lt;select class="form-control" style="width: 120px;border: 1px solid skyblue;" data-ng-model="target.pid" ng-change="getUnitsofProduct(target.pid)"&gt;
          &lt;option value=""&gt;Select pid&lt;/option&gt;
          &lt;option data-ng-repeat="pid in productids"&gt;{{pid}}&lt;/option&gt;
         &lt;/select&gt;
         &lt;/td&gt; 
         
          &lt;td align="center"&gt;
                                 &lt;input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week1"&gt; 
         &lt;/td&gt;
         &lt;td align="center"&gt;
                                 &lt;input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week2"&gt;
            &lt;/td&gt;
         &lt;td align="center"&gt;
                                 &lt;input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week3"&gt;
         &lt;/td&gt;
         &lt;td align="center"&gt;
                                 &lt;input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week4"&gt;
         &lt;/td&gt;
           
         &lt;!-- &lt;td align="center" &gt;
          {{ (target.week1 * 1) + (target.week2 * 1)+ (target.week3 * 1)+ (target.week4 *1)+ (target.week5 *1) }} {{target.uom}} 
         &lt;/td&gt; --&gt;
  
         &lt;!-- &lt;td ng-if="target.status==''"&gt;&lt;/td&gt;
         &lt;td ng-if="target.status==='Pending'"&gt;&lt;span style="color: blue"&gt;{{target.status}}&lt;/span&gt;&lt;/td&gt;
         &lt;td ng-if="target.status==='Rejected'"&gt;&lt;span style="color: red"&gt;{{target.status}}&lt;/span&gt;&lt;/td&gt;
         &lt;td ng-if="target.status==='Accepted'"&gt;&lt;span style="color: green"&gt;{{target.status}}&lt;/span&gt;&lt;/td&gt; --&gt;
         
         &lt;td align="center"&gt;
         &lt;button class="add" style="background-color: #008CBA;" data-ng-show="$last" data-ng-click="addNewChoice($parent.$index)"&gt;+&lt;/button&gt;
         &lt;button class="sub" data-ng-click="removeChoice($index)" style="background-color:#f44336;margin:0px;"&gt;-&lt;/button&gt;
         &lt;/td&gt;
         &lt;td&gt;{{$parent.$index}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
              &lt;br&gt;
  
                   
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
    &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"  style="padding: 0px"&gt;
    &lt;div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" &gt;
    &lt;button  data-ng-click="addorder()" style=" padding: 5px;margin: 0px"&gt;Add&amp;nbsp;Order&lt;/button&gt;
    &lt;/div&gt;
    &lt;/div&gt;  
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>