title: AngularJS Uploading images and pushing into array
body: <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>var app = angular.module('gemStore', []);
    app.controller('StoreController', function($scope){
  
  $scope.gems = [
         {
      "name": "Orthoclase Feldspar",
      "description": "First synthesized in 1962, Rhenium diboride, synthetic superhard material, compared to the others on the list is a cheaper material to make as its production does not involve high pressures.",
      "formula": "(ReB2)",
    "rank": 5,
      "hard": 72,
      "rarity": 7,
      "images": [
       "images/rhenium.jpg",
       "images/rhenium2.jpg",
       "images/rhenium3.jpg"
      ],
      "reviews": [{
       "stars": 5,
       "body": "I love this gem!",
       "author": "joe@example.org"
      }, {
       "stars": 1,
       "body": "This gem sucks.",
       "author": "tim@example.org"
      }]
     },   {
      "name": "Quartz",
      "description": "Quartz is a chemical compound consisting of one part silicon and two parts oxygen. It is silicon dioxide (SiO2). It is the most abundant mineral found at Earth's surface, and its unique properties make it one of the most useful natural substances.",
      "formula": "(SiO2)",
    "rank": 4,
      "hard": 100,
      "rarity": 7,
      "images": [
       "images/quartz.jpg",
       "images/quartz2.jpg",
       "images/quartz3.jpg"
      ],
      "reviews": [{
       "stars": 3,
       "body": "I think this gem was just OK, could honestly use more 'shine', IMO.",
       "author": "JimmyDean@example.org"
      }, {
       "stars": 4,
       "body": "Any gem with 12 'faces' is for me!",
       "author": "gemsRock@example.org"
      }]
     }, {
      "name": "Topaz",
      "description": "Topaz is a silicate mineral of aluminium and fluorine with the chemical formula Al2SiO4(F,OH)2. Topaz crystallizes in the orthorhombic system, and its crystals are mostly prismatic terminated by pyramidal and other faces.",
      "formula": "(Al2SiO4(OH-,F-)2)",
    "rank": 3,
      "hard": 200,
      "rarity": 8,
      "images": [
       "images/topaz.jpg",
       "images/topaz2.jpg",
       "images/topaz3.jpg"
      ],
      "reviews": [{
       "stars": 1,
       "body": "This gem is WAY too expensive for its 'rarity' value.",
       "author": "turtleguyy@example.org"
      }, {
       "stars": 1,
       "body": "BBW: High 'shine' != High Quality.",
       "author": "LouisW407@example.org"
      }, {
       "stars": 1,
       "body": "Don't waste your rubles!",
       "author": "nat@example.org"
      }]
     },   {
      "name": "Corundum",
      "description": "Corundum is a rock-forming mineral that is found in igneous, metamorphic, and sedimentary rocks. It is an aluminum oxide with a chemical composition of Al2O3 and a hexagonal crystal structure.",
      "formula": "(Al2O3)",
    "rank": 2,
      "hard": 400,
      "rarity": 9,
      "images": [
       "images/corundum.jpg",
       "images/corundum2.jpg",
       "images/corundum3.jpg"
      ],
      "reviews": [{
       "stars": 1,
       "body": "This gem is WAY too expensive for its 'rarity' value.",
       "author": "turtleguyy@example.org"
      }, {
       "stars": 1,
       "body": "BBW: High 'shine' != High Quality.",
       "author": "LouisW407@example.org"
      }, {
       "stars": 1,
       "body": "Don't waste your rubles!",
       "author": "nat@example.org"
      }]
    
    
     }, {
      "name": "Diamond",
      "description": "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high 'shine' gem.",
      "formula": "(C)",
    "rank": 1,
      "hard": 1500,
      "rarity": 10,
      "images": [
       "images/diamond.png",
       "images/diamond2.jpg",
       "images/diamond3.png"
      ],
      "reviews": [{
       "stars": 1,
       "body": "This gem is WAY too expensive for its 'rarity' value.",
       "author": "turtleguyy@example.org"
      }, {
       "stars": 1,
       "body": "BBW: High 'shine' != High Quality.",
       "author": "LouisW407@example.org"
      }, {
       "stars": 1,
       "body": "Don't waste your rubles!",
       "author": "nat@example.org"
      }]
    
     }];
     
    var number = 5; //Starting with 5 Substances 
     
     
    $scope.insertSubstance = function(addsub) {
             addsub.reviews = [];
         $scope.gems.push(addsub);
         this.sub = {};
       number = number+1; //I made this so whenever user adds 1 object it changes title but wont work
         
       
       if(addsub.rank == 1)
       {
        
      $scope.gems[0].rank = 6;
      $scope.gems[1].rank = 5;    
      $scope.gems[2].rank = 4;  
        $scope.gems[3].rank = 3; 
        $scope.gems[4].rank = 2;    
        
       }
      if(addsub.rank == 2)
       {
        
      $scope.gems[0].rank = 6;
      $scope.gems[1].rank = 5;    
      $scope.gems[2].rank = 4;  
            $scope.gems[3].rank = 3;    
        
       }
      if(addsub.rank == 3)
       {
        
      $scope.gems[0].rank = 6;
      $scope.gems[1].rank = 5;    
      $scope.gems[2].rank = 4;     
        
       }
    if(addsub.rank == 4)
       {
        
      $scope.gems[0].rank = 6;
      $scope.gems[1].rank = 5;    
     
        
       }
     if(addsub.rank == 5)
       {
        
      $scope.gems[0].rank = 6;   
     
        
       }
     }
     
     $("#num").append(number);
     
  
     $scope.addReview = function (stone) {
         this.gem.reviews.push(stone);
         this.rev = {};
     }
    });
  
    app.controller('TabController', function($scope){
      $scope.tab = 1;
  
      $scope.setTab = function(newValue){
        $scope.tab = newValue;
      };
  
     $scope.isSet = function(tabNumber){
        return $scope.tab === tabNumber;
      };
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html  lang="en" &gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Hardest Substances&lt;/title&gt;
          &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/bootstrap-theme.min.css" rel="stylesheet"&gt;
         &lt;link href="css/gemstore.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body ng-app="gemStore" class="list-group" ng-controller="StoreController"&gt;
    &lt;div class="container"&gt;
      &lt;header&gt;
        &lt;h1 class="text-center"&gt;Top &lt;div id="num"&gt;&lt;/div&gt; Hardest Substances on Earth&lt;/h1&gt; 
      &lt;/header&gt;
      &lt;div class="list-group-item" ng-repeat="gem in gems | orderBy:'-rank'" &gt;
        &lt;h3&gt;
          {{gem.name}}
          &lt;em class="pull-right"&gt;{{gem.rank}}&lt;/em&gt;
        &lt;/h3&gt;
        &lt;div ng-show="gem.images.length"&gt;
      &lt;ul class="list-inline thumbs"&gt;
         &lt;li class="small-image thumbnail"
             ng-repeat="image in gem.images" &gt;
                  &lt;img ng-src="{{image}}" &gt;
          &lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
        &lt;section ng-controller="TabController"&gt;
     &lt;ul class="nav nav-pills"&gt;
     &lt;li ng-class="{active:isSet(1)}"&gt; &lt;a href ng-click="setTab(1)"&gt;Description&lt;/a&gt; &lt;/li&gt;
     &lt;li ng-class="{active:isSet(2)}"&gt; &lt;a href ng-click="setTab(2)"&gt;Specs&lt;/a&gt; &lt;/li&gt;
     &lt;li ng-class="{active:isSet(3)}"&gt; &lt;a href ng-click="setTab(3)"&gt;Opinions&lt;/a&gt; &lt;/li&gt;
     &lt;/ul&gt;
  
          &lt;div ng-show="isSet(1)"&gt;
            &lt;h4&gt;Description&lt;/h4&gt;
            &lt;blockquote&gt; {{gem.description}}&lt;/blockquote&gt;
          &lt;/div&gt;
          &lt;div ng-show="isSet(2)"&gt;
            &lt;h4&gt;Specs&lt;/h4&gt;
            &lt;blockquote&gt;
            &lt;ul class="list-unstyled"&gt;
     &lt;li&gt;&lt;strong&gt;Chemical Formula&lt;/strong&gt;: {{gem.formula}}&lt;/li&gt;
     &lt;li&gt;&lt;strong&gt;Rarity&lt;/strong&gt;: {{gem.rarity}}&lt;/li&gt;
     &lt;li&gt;&lt;strong&gt;Absolute Hardness: &lt;/strong&gt;{{gem.hard}} &lt;/li&gt;
           &lt;/ul&gt;
           &lt;/blockquote&gt;
          &lt;/div&gt;
  
          &lt;div ng-show="isSet(3)"&gt;
            &lt;h4&gt;Reviews&lt;/h4&gt;
            &lt;ul&gt;
  
       &lt;li class="list-unstyled" ng-repeat = "review in gem.reviews"&gt;
        &lt;blockquote&gt;
         &lt;strong&gt;{{review.stars}} Stars&lt;/strong&gt;
                       {{review.body}}
         &lt;br&gt;&lt;cite&gt;-{{review.author}}&lt;/cite&gt;
        &lt;/blockquote&gt;
       &lt;/li&gt;
             &lt;/ul&gt;
    &lt;form name="reviewForm" ng-submit="addReview(rev)"&gt;
       &lt;blockquote &gt;
         &lt;strong&gt;{{rev.stars}} Stars&lt;/strong&gt;
         {{rev.body}}
          &lt;br&gt;&lt;cite&gt;&amp;#9472;{{rev.author}}&lt;/cite&gt;
    &lt;/blockquote&gt;
                     &lt;fieldset&gt;
                     &lt;legend&gt;Submit a Review&lt;/legend&gt;
                     &lt;div class="form-group"&gt;
                     &lt;div class=custom-error ng-show="reviewForm.stars.$error.required"&gt;**&lt;/div&gt;
                       &lt;select ng-model="rev.stars" class="form-control" name="stars" ng-options="stars for stars in [5,4,3,2,1]" title="Stars" required &gt;
                         &lt;option value&gt;Rate the Product&lt;/option&gt;
                       &lt;/select&gt;
                     &lt;/div&gt;
                     &lt;div class="form-group"&gt;
                     &lt;div class=custom-error ng-show="reviewForm.body.$error.required"&gt;**&lt;/div&gt;
                       &lt;textarea ng-model="rev.body" name = "body" class="form-control" placeholder="Write a short review of the product..." title="Review" ng-pattern="/.{5,}/" required&gt;&lt;/textarea&gt;
                       &lt;div class="custom-error" ng-show="reviewForm.body.$error.pattern"&gt;Body doesn't respect the pattern.
                             &lt;/div&gt;
                     &lt;/div&gt;
                     &lt;div class="form-group"&gt;
                     &lt;div class=custom-error ng-show="reviewForm.author.$error.required"&gt;**&lt;/div&gt;
                       &lt;input ng-model="rev.author" type="email" name = "author" class="form-control" placeholder="jimmyDean@example.org" title="Email"  ng-pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" required&gt;
                       &lt;div class="custom-error" ng-show="reviewForm.author.$error.pattern"&gt;Email Address doesn't respect the pattern.
                             &lt;/div&gt;
                          &lt;/div&gt;
                     &lt;div class="form-group"&gt;
                       &lt;input type="submit" class="btn btn-primary pull-right" ng-disabled="reviewForm.$invalid" value="Submit Review" &gt;
                     &lt;/div&gt;
                     &lt;/fieldset&gt;
             &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;/div&gt;
  &lt;button onclick="substanceForm()" class="btn btn-blue"&gt;Add Substance&lt;/button&gt;
       &lt;form name="addSubstance" ng-submit="insertSubstance(sub)"&gt;
                     &lt;fieldset&gt;
                     &lt;legend&gt;Add a Substance&lt;/legend&gt;
                     &lt;div class="form-group"&gt;
                     &lt;div class=custom-error ng-show="addSubstance.rank.$error.required"&gt;**&lt;/div&gt;
                       &lt;select ng-model="sub.rank" class="form-control" name="rank" ng-options="rank for rank in [10,9,8,7,6,5,4,3,2,1]" title="Rank" required &gt;
                         &lt;option value&gt;Rank the Substance&lt;/option&gt;
                       &lt;/select&gt;
                     &lt;/div&gt;
                     &lt;div class="form-group"&gt;
                     &lt;div class=custom-error ng-show="addSubstance.name.$error.required"&gt;**&lt;/div&gt;
                       &lt;textarea ng-model="sub.name" name = "Name" class="form-control" placeholder="Write the Name of the Substance...." title="Name" ng-pattern="/.{5,}/" required&gt;&lt;/textarea&gt;
                       &lt;div class="custom-error" ng-show="addSubstance.name.$error.pattern"&gt;Invalid Name.
                             &lt;/div&gt;
                     &lt;/div&gt;
                          &lt;div class="form-group"&gt;
         &lt;div class=custom-error ng-show="addSubstance.description.$error.required"&gt;**&lt;/div&gt;
                       &lt;textarea ng-model="sub.description" name = "Description" class="form-control" placeholder="Write the Description of the Substance..." title="Description" ng-pattern="/.{5,}/" required&gt;&lt;/textarea&gt;
                       &lt;div class="custom-error" ng-show="addSubstance.description.$error.pattern"&gt;Invalid Description.
                     &lt;/div&gt;
         &lt;/div&gt;
        &lt;div class="form-group"&gt;
         &lt;div class=custom-error ng-show="addSubstance.formula.$error.required"&gt;**&lt;/div&gt;
                       &lt;textarea ng-model="sub.formula" name = "Formula" class="form-control" placeholder="Write the Formula..." title="Formula" ng-pattern="/.{5,}/" required&gt;&lt;/textarea&gt;
                       &lt;div class="custom-error" ng-show="addSubstance.formula.$error.pattern"&gt;Invalid Formula.
         &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="form-group"&gt;
                     &lt;div class=custom-error ng-show="addSubstance.rarity.$error.required"&gt;**&lt;/div&gt;
                       &lt;select ng-model="sub.rarity" class="form-control" name="rarity" ng-options="rarity for rarity in [10,9,8,7,6,5,4,3,2,1]" title="Rarity" required &gt;
                         &lt;option value&gt;Set the Rarity&lt;/option&gt;
                       &lt;/select&gt;
                     &lt;/div&gt;
    Image 1: &lt;input type="file" ngf-select="" ng-model="sub.images[0]" name="image" ngf-accept="'image/*'" required=""&gt;
                           &lt;i ng-show="addSubstance.images[0].$error.required"&gt;*required&lt;/i&gt;
         Image 2: &lt;input type="file" ngf-select="" ng-model="sub.images[1]" name="image" ngf-accept="'image/*'" required=""&gt;
                           &lt;i ng-show="addSubstance.images[1].$error.required"&gt;*required&lt;/i&gt;
         Image 3: &lt;input type="file" ngf-select="" ng-model="sub.images[2]" name="image" ngf-accept="'image/*'" required=""&gt;
                           &lt;i ng-show="addSubstance.images[2].$error.required"&gt;*required&lt;/i&gt;   
                       
                       
         &lt;div class="form-group"&gt;
         &lt;div class=custom-error ng-show="addSubstance.hard.$error.required"&gt;**&lt;/div&gt;
                       &lt;textarea ng-model="sub.hard" name = "Absolute" class="form-control" placeholder="Write the Absolute Hardness Value" title="Absolute" ng-pattern="/^[0-9]*$/" required&gt;&lt;/textarea&gt;
                       &lt;div class="custom-error" ng-show="addSubstance.hard.$error.pattern"&gt;Numbers Only.
         &lt;/div&gt;
         &lt;/div&gt;
        
                     &lt;div class="form-group"&gt;
                       &lt;input type="submit" class="btn btn-primary pull-right" ng-disabled="addSubstance.$invalid" value="Submit Substance" &gt;
                     &lt;/div&gt;
                     &lt;/fieldset&gt;
             &lt;/form&gt;
     
     
     
     
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="js/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/angular.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Basically what i want to do is to add an image upload , as you can see i have 3 images each for every object in the array . I want to make 3 upload sections and also push them into the array as it's pushing the objects into the array already but without the images(I think i need the image file path like i have in my array). The form i'm talking about is the addSubstance form and i added an upload section already but it doesn't even let me submit and i don't know why. I also want to change the title whenever someone adds a new Substance , it will change the title from top 5 to top 6 , i commented out what i did on that but it doesn't work for some reason.</p>
  
  <p>Edit: </p>
  
  <p>I fixed the name changing it was just stupid and simple mistake just changed      $("#num").append(number); to $("#num").html(number); and also included it into the function addSubstance so it updates the current state.</p>