title: Conditional use of angular service or factory function within a controller
body: <p>I have two API services to get json data extracted from two DB tables. The data is being used to produce charts. I have managed to generate one such bar chart with data from one table. The other chart would be exactly the same. However, I don't want to duplicate the code. Could you please let me know how can it be done with Angular JS and Highcharts?</p>
  
  <p>My working javascript is, (generates one chart)</p>
  
  <pre><code>var app = angular.module('charts', []);
  
  app.directive('highchart', function () {
  return {
      restrict: 'E',
      template: '&lt;div&gt;&lt;/div&gt;',
      replace: true,
  
      link: function (scope, element, attrs) {
  
          scope.$watch(function () { return attrs.chart; }, function () {
  
              if (!attrs.chart) return;
  
              var charts = JSON.parse(attrs.chart);
  
              $(element[0]).highcharts(charts);
  
          });
      }
  };
  });
  
  app.controller('Ctrl', function ($scope, $http, $timeout) {
  $http.get('http://localhost:1234/overspeedworst/OverSpeedworst').success(function (data, status) {
  
      var score = [];
      for (var i = 0; i &lt; data.length; i++) {
          score.push(data[i].Score);   
      }
  
      var name = [];
      for (var i = 0; i &lt; data.length; i++) {
          name.push(data[i].Name);
      }
  
      $scope.renderChart = {
          chart: {
              type: 'bar'
          },
          xAxis: {
              categories: name
          },
          series: [{
              data: score
          }],
          legend: {
              enabled: false
          }
      };
  }).error("error message");
  $timeout($scope.fetch, 1000);
  });
  </code></pre>
  
  <p>and my HTML is </p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Dashboard Application&lt;/title&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="Scripts/DashboardCtrl.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="Dashboard.css"&gt;&lt;/link&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;h2&gt;Overspeed (Worst) Scores&lt;/h2&gt;
              &lt;section ng-app="charts"&gt;
                  &lt;div ng-controller="Ctrl"&gt;
                      &lt;highchart chart='{{renderChart}}'&gt;&lt;/highchart&gt;
                  &lt;/div&gt;    
              &lt;/section&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;h2&gt;Overspeed (Best) Scores&lt;/h2&gt;
  
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;h2&gt;Vehicle Mileage&lt;/h2&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;h2&gt;Servicing Report&lt;/h2&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My aim is to produce a second chart called Overspeed (Best) score in the same way as Overspeed (Worst) score without much duplication in the code (The only difference is the data for the charts i.e the URL in $http.get request). </p>
  
  <p>Thus, I planned to write two angular factory functions (or services) which would retrieve the json data from the respective tables. I could then put some conditional logic in my controller depending on which, the controller would build the chart object with the data from the respective service. But I could not figure out how can this be done. Any help would be much appreciated.</p>
  
  <p>Many Thanks</p>