title: Injecting $scope into an angular service function()
body: <p>I have a Service:</p>
  
  <pre><code>angular.module('cfd')
    .service('StudentService', [ '$http',
      function ($http) {
      // get some data via the $http
      var path = 'data/people/students.json';
      var students = $http.get(path).then(function (resp) {
        return resp.data;
      });     
      //save method create a new student if not already exists
      //else update the existing object
      this.save = function (student) {
        if (student.id == null) {
          //if this is new student, add it in students array
          $scope.students.push(student);
        } else {
          //for existing student, find this student using id
          //and update it.
          for (i in students) {
            if (students[i].id == student.id) {
              students[i] = student;
            }
          }
        }
      };
  </code></pre>
  
  <p>But when I call <code>save()</code>, I don't have access to the <code>$scope</code>, and get <code>ReferenceError: $scope is not defined</code>. So the logical step (for me), is to provide save() with the <code>$scope</code>, and thus I must also provide/inject it to the <code>service</code>.  So if I do that like so:</p>
  
  <pre><code>  .service('StudentService', [ '$http', '$scope',
                        function ($http, $scope) {
  </code></pre>
  
  <p>I get the following error: </p>
  
  <blockquote>
    <p>Error: [$injector:unpr] Unknown provider: $scopeProvider &lt;- $scope &lt;-
    StudentService</p>
  </blockquote>
  
  <p>The link in the error (wow that is neat!) lets me know it is injector related, and might have to do with order of declaration of the js files.   I have tried reordering them in the <code>index.html</code>, but I think it is something more simple, such as the way I am injecting them.</p>
  
  <p>Using Angular-UI and Angular-UI-Router</p>