AngularJS Error: $injector:unpr Unknown Provider. edited

Question

Now i have added code in the question. controllers.js services.js

and getting this error. angular.js:13642 Error: [$injector:unpr] http://errors.angularjs.org/1.5.6/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20CF at angular.js:38 at angular.js:4501 at Object.d [as get] (angular.js:4654) at angular.js:4506 at d (angular.js:4654) at e (angular.js:4678) at Object.invoke (angular.js:4700) at Object.$get (angular.js:4547) at Object.invoke (angular.js:4708) at angular.js:4507

'use strict';
angular.module("carsApp")
  .controller("carsController", ["$scope", "CF",
    function($scope, CF) {
      $scope.tab = 1;
      $scope.filterTxt = '';
      $scope.showDetails = false;
      $scope.cars = CF.getCars();
      $scope.selectMenu = function(setTab) {
        $scope.tab = setTab;
        if (setTab === 2) {
          $scope.filterTxt = "BMW";
        } else if (setTab === 3) {
          $scope.filterTxt = "HONDA";
        } else if (setTab === 4) {
          $scope.filterTxt = "TOYOTA";
        } else {
          $scope.filterTxt = "";
        }
      }
      $scope.isSelected = function(val) {
        return ($scope.tab === val);
      }
      $scope.toggleDetails = function() {
        $scope.showDetails = !$scope.showDetails;
      }
    }
  ]);

//Sser 
angular.module("carsApp")
  .factory("CF", function($scope) {
    var carFact = {};
    $scope.cars = [{
      id: '1',
      make: 'BMW',
      name: 'BMW',
      image: 'images/bmw/bmw1.png',
      model: '2005',
      price: '4500',
      description: 'A very nice maintained car. Good road grip, no work required. Next inspection March 2017',
      comment: ''
    }, {
      id: '2',
      make: 'HONDA',
      name: 'Civic',
      image: 'images/honda/honda1.png',
      model: '2016',
      price: '25000',
      description: 'Honda is a nice car. Good road grip, no work required. Next inspection March 2017',
      comment: ''
    }, ];
    carFact.getCars = function() {
      return cars;
    };

    carFact.getCar = function(index) {
      return cars[index];
    };
    return carFact;
  });

Answer 1

A Factory Provider has no concept of a scope variable, in the same sense that a controller does. If necessary, another value could be injected into that factory - e.g.:

angular.module('carsApp', [])
.value('topCarId','1')
.factory('CF', ['topCarId',function(topCarId) {
      //this factory provider can utilize topCarId 
});

Here is a simplified example, where the user is prompted to select a car. It utilizes ngOptions to add the cars to a select list, though perhaps your code has calls to selectMenu() on buttons or other elements.

angular.module('carsApp', [])
  .factory('CF', function() {
    var cars = [{
      id: '1',
      make: 'BMW',
      name: 'BMW',
      description: 'A very nice maintained car...'
    }, {
      id: '2',
      make: 'Honda',
      name: 'Civic',
      description: 'Honda is a nice car...'
    },
{
      id: '3',
      make: 'Toyota',
      name: 'Camry',
      description: 'Toyota is a nice car...'
    }];
    return {
      getCars: function() {
        return cars;
      }
    };
  })
  .controller('carsController', ['$scope', 'CF',
    function($scope, CF) {
      $scope.cars = CF.getCars();
      $scope.filterTxt = '';
      $scope.tab = 0;
      $scope.car = {};
      $scope.selectMenu = function(setTab) {
        $scope.tab = setTab;
        $scope.filterTxt = $scope.car.make;
      }
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="carsApp" ng-controller="carsController">
  Choose a car: <select ng-model="car" ng-options="car as car.name for car in cars track by car.id" ng-change="selectMenu(car.id)"></select>
  
  <div>FilterTxt: <span ng-bind="filterTxt"></span></div>
  <div>Tab: <span ng-bind="tab"></span></div>
</div>