How I can save the value of ng-include and use later

Question

How I can save the value of ng-include and use later

I am blocked and can not be as follow, to see if someone could help me ... (sorry for my bad English and my explanation).

I have this pen where I have an input to insert a value or load default. NgStorage I use to store the value in memory if the app is reloaded and always load the user types in the input (localStorage).

After I have a dropdown where I choose one of the two numbers that charged me one of two templates that I have created (or template1 template2) in the following div.

Far right, but now I would like to save that result in any way for the next div (red border) perform a simple arithmetic operation as chosen above using a scope variable declared in the driver from the start.

Any help please?

Here my pen (I use ionic): http://codepen.io/maestromutenrroy/pen/ukwIC

    <html ng-app="ionicApp"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Ionic....</title>

    <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
    <script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
  </head>
  <body ng-controller="MainCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Hello!</h1>
    </ion-header-bar>

    <br /><br /><br />
    <!-- load 11, but I change the valor -->
    Write a number: <input type="number" ng-model="$storage.c6" style="border: 1px solid #ddd; padding-left: 10px">
    <br>
    <!-- select of two templates -->
    Select one option:
    <select ng-model="template" ng-options="t.name for t in templates">
      <option value="">(blank)</option>
    </select>
    <!-- print a template select -->
    <div ng-include src="template.url" onload='myFunction()'></div>

    <!-- template1.html -->
    <script type="text/ng-template" id="template1.html">
      {{1000 - $storage.c6}}
    </script>

    <!-- template2.html -->
    <script type="text/ng-template" id="template2.html">
      {{10 - $storage.c6}}
    </script>

    <br>
    <hr />
    <div style="border: 2px solid red; padding: 20px">
      Now, I would like a same operation (result of template1 or template2 - $storage.c12): .....
    </div>

  </body>
</html>

  angular.module('ionicApp', ['ionic','ngStorage'])

  .controller('MainCtrl', function($scope, $localStorage) {

  $scope.$storage = $localStorage.$default({
      c6: 1,
      c12: 2
  });

  $scope.templates = [{
      name: '5',
      url: 'template1.html'}
      ,
      {
        name: '10',
        url: 'template2.html'}];
    $scope.template = $scope.templates[0];

 })

Thank you!

angularjs
ionic-framework

Answer 1

You can save the results in a scope object and update it inside each template:

<!-- template1.html -->
<script type="text/ng-template" id="template1.html">
  {{results.x = 1000 - $storage.c6}}
</script>

<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
  {{results.x = 10 - $storage.c6}}
</script>

<div style="border: 2px solid red; padding: 20px">
  Now, I would like a same operation (result of template1 or template2 - $storage.c12): ..... {{results.x - $storage.c12}}
</div>

And on the controller:

$scope.results = {};

Demo