title: Error: Unknown provider: $elementProvider <- $element
body: <p>i am trying to use routing in angularjs application as follows:</p>
  
  <p>app.js</p>
  
  <pre><code>    angular.module('productapp', []).
      config(['$routeProvider', function($routeProvider) {
      $routeProvider.
          when('/productapp', {templateUrl: 'partials/productList.html',   controller: productsCtrl}).
          //~ when('/productapp/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
          otherwise({redirectTo: '/productapp'});
  }]);
  </code></pre>
  
  <p>controller.js</p>
  
  <pre><code>function productsCtrl($scope, $http, $element) {
          //~ $scope.url = 'php/search.php'; // The url of our search
          // The function that will be executed on button click (ng-click="search()")
          $http.get('php/products.php').success(function(data){
              alert("hi");
              $scope.products = data;
          });
  
      $scope.search = function() {
          var elem = angular.element($element);
          var dt = $(elem).serialize();
          dt = dt+"&amp;action=index";
          alert(dt);
          console.log($(elem).serialize());
          $http({
              method: 'POST',
              url: 'php/products.php',
              data: dt,
              headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          }).success(function(data, status) {
              //console.log(data);
              $scope.products = data; // Show result from server in our &lt;pre&gt;&lt;/pre&gt; element
          }).error(function(data, status) {
              $scope.data = data || "Request failed";
              $scope.status = status;
          });
      }; //....
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;html ng-app = "productapp"&gt;
  &lt;head&gt;
  &lt;title&gt;Search form with AngualrJS&lt;/title&gt;
          &lt;script src="../angular-1.0.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/products.js"&gt;&lt;/script&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>productList.html</p>
  
  <pre><code>&lt;div&gt;
              &lt;label&gt;Search&lt;/label&gt;
              &lt;input type="text" name="searchKeywords" ng-model="keywords" placeholder="enter name..." value="{{rs.name}}"&gt;
              &lt;button type="submit" ng-click="search()"&gt;Search&lt;/button&gt;
              &lt;label&gt;Add New Product:&lt;/label&gt;
              &lt;input type="text" name="keywords" ng-model="rs.name" placeholder="enter name..." value="{{rs.name}}"&gt;
              &lt;input type="text" name="desc" ng-model="rs.description" placeholder="enter description..." value="{{rs.description}}"&gt;
              &lt;button type="submit" ng-click="add()"&gt;Add&lt;/button&gt;
              &lt;button type="submit" ng-click="save(rs.product_id)"&gt;Save&lt;/button&gt;
  
              &lt;p&gt;enter product name...&lt;/p&gt;
              &lt;table border='2'&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Description&lt;/th&gt;
                  &lt;th&gt;Edit&lt;/th&gt;
                  &lt;th&gt;Delete&lt;/th&gt;
  
                  &lt;tr ng-repeat="product in products" ng-model = 'products'&gt;
                  &lt;td&gt;{{product.name}}&lt;/td&gt;
                  &lt;td&gt;{{product.description}}&lt;/td&gt;
                      &lt;td&gt;&lt;a href='' ng-click = "fetch(product.product_id)"&gt;edit&lt;/a&gt;&lt;/td&gt;
                      &lt;td&gt; &lt;a href='' ng-click = "del(product.product_id)" ng-hide="isHidden"&gt;delete&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>when i run this code i get the following error in the console(of google chrome) :</p>
  
  <pre><code>Error: Unknown provider: $elementProvider &lt;- $element
  </code></pre>
  
  <p>i came to know that this error occurred because i am using the <code>$element</code> in the productsCtrl. but then what should i do?
  how do i solve this problem?</p>