title: Reusing a html form to add and edit data in Angularjs
body: <p>I've been learning AngularJs recently, and was wondering if there is a way to solve the below problem.</p>
  
  <p>I have a page called cardetails.html that displays some car details such as name, make, model etc. The data gets populated from a service that looks upon the session storage. So, when the app is run for the first time, only the 'add' link is visible. Clicking on 'add' will navigate the user to a page called 'CarDetailsForm.html' that contains the form to add data. </p>
  
  <p>When the form is submitted, data will be stored in session storage and the user will be navigated back to the cardetails.html, and the car details will be visible this time along with the edit link. Now, I need to find a way to reuse 'CarDetailsForm.html' for editing as well. When, the user clicks on edit link, the form should open along with the populated data in form elements. I have done most of the work, but not sure about how to implement 'Edit' feature properly. I found the below link helpful, but I'm trying to avoid creating the same form elements twice.</p>
  
  <p><a href="https://stackoverflow.com/questions/15453254/angular-js-edit-in-place-content-editing">Angular JS - Edit In Place Content Editing</a></p>
  
  <p>One other issue is that when the user hits 'back' on the browser from cardetails.html to 'CarDetailsForm.html' just after an edit, the data should still persist on the form. How can I achieve this ?</p>
  
  <p>Also, i'm not sure whether using custom directives is necessary to solve this problem. Any help or advice would be much appreciated. Thanks</p>
  
  <p><strong>Updated the code with the solution</strong> (just had to use model binding)</p>
  
  <p>Below is the markup for cardetails.html</p>
  
  <pre><code>&lt;div ng-controller="carDetailsCtrl"&gt;
      &lt;div&gt;Car Details&lt;/div&gt;
      &lt;div ng-show="hasData"&gt;     
          &lt;ul&gt;
              &lt;li&gt;{{carDetails.name}}&lt;/li&gt;  
              &lt;li&gt;{{carDetails.make}}&gt;&lt;/li&gt;          
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div ng-hide="hasData"&gt;&lt;a href="#carDetailsForm"&gt;add&lt;/a&gt;&lt;/div&gt;
      &lt;div ng-show="hasData"&gt;&lt;a href="#carDetailsForm"&gt;edit&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CarDetailsForm.html</p>
  
  <pre><code>&lt;form ng-submit="submit()" ng-controller="carDetailsFormCtrl"&gt;
  &lt;input type="text" id="name" required="required" ng-model="formData.name"&gt;
  &lt;input type="text" id="make" required="required" ng-model="formData.make"&gt;
  &lt;input type="submit" id="submit" value="submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Below are my scripts.</p>
  
  <pre><code>app.config([
      '$routeProvider', function ($routeProvider) {
          $routeProvider.            
              when('/carDetailsForm', { templateUrl: 'CarDetailsForm.html' }).
              //when('/carDetailsForm:carDetails', { templateUrl: 'CarDetailsForm.html' }).
              otherwise({
                  templateUrl: 'cardetails.html'
              });
      }
  ]);
  
  
      app.factory('carDetailsService', function () {
          return {
              get: function(key) {
                  return sessionStorage.getItem(key);
              },
              set: function(key, value) {
                  sessionStorage.setItem(key, JSON.stringify(value));
              },
              remove: function(key) {
                  sessionStorage.removeItem(key);
              },
              clearAll: function() {
                  sessionStorage.clear();
              }
          };
      });
  
  app.controller('carDetailsCtrl', ['$scope', 'carDetailsService', function ($scope, carDetailsService) {
  
      var carDetailsInfo = carDetailsService.get("carDetailsInfo");
  
      $scope.carDetails = JSON.parse(carDetailsInfo);
  
      $scope.hasData = false;
      if ($scope.carDetails) {
          $scope.hasData = true;
      }
  }]);
  
  app.controller('carDetailsFormCtrl', [
      '$scope', 'carDetailsService', '$location', '$routeParams', function($scope, carDetailsService, $location, $routeParams) {
          $scope.formData = JSON.parse(carDetailsService.get("carDetailsInfo")) || {} ;
          //$scope.formData = $routeParams;
          $scope.submit = function() {
              carDetailsService.set("carDetailsInfo", $scope.formData);
              $location.path('/cardetails');
          };
      }
  ]);
  </code></pre>