title: get function return value with angularjs
body: <p>I am trying to get the result of my function convert and display it on the page</p>
  
  <p>Here is my function:</p>
  
  <pre><code>$scope.convert = function(myUnit, myUnit2, distance){
      var result = 0;
      if(myUnit === "Kilometer"){
          if(myUnit2 === "Kilometer"){
              result = distance;
          }
          else if(myUnit2 === "Meter"){
              result = distance * 1000;
          }
          else if(myUnit2 === "Centimeter"){
              result = distance * 100000;
          }
          else if(myUnit2 === "Millimeter"){
              result = distance * 1000000;
          }
          else if(myUnit2 === "Mile"){
              result  = distance * 0.621371;
          }
          else if(myUnit2 === "Nautical Mile"){
              result = distance * 0.539957;
          }
      }
  }
  </code></pre>
  
  <p>Here is how the function is called:</p>
  
  <pre><code>&lt;button class="button button-block button-balanced" ng-click="convert(myUnit.thisunit, myUnit2.thisunit2, formData.distance)"&gt;
       Convert
  &lt;/button&gt;
  </code></pre>
  
  <p>Here is where I want to display the result:</p>
  
  <pre><code>&lt;label class="item item-input" style="border-style: solid;
                  border-color: black;"&gt;
       &lt;span class="input-label"&gt;Result:&lt;/span&gt;
       &lt;p&gt;DISPLAY RESULT HERE&lt;/p&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>I am having a hard time displaying the result... The convert function is inside my controller:</p>
  
  <pre><code>myApp.controller('mainController', ['$scope', function($scope)
  </code></pre>
  
  <p>And the button and the place I want to put the value are within scope of my controller. Help would be appreciated!</p>