title: Display data from phpmyadmin using angularJS
body: <p>I wish to display data from <code>mysql database</code> using <code>angularJS</code> but all in vain. Please review my code and suggest me where am I going wrong ?</p>
  
  <pre><code>  &lt;?php
      $host = "localhost"; 
      $user = ""; 
      $pass = ""; 
      $database = "abc";
      $con = mysql_connect($host,$user,$pass);
      if (!$con) {
          die('Could not connect: ' . mysql_error());
      }
      echo 'Connected successfully'; 
      mysql_select_db($database,$con);  
       //select
      $query = "SELECT * FROM `product`"; 
      $result = mysql_query($query) OR die(mysql_error()); 
      $arr = array();
      //now we turn the results into an array and loop through them. 
      while ($row = mysql_fetch_array($result)) { 
          $name = $row['name']; 
          $description = $row['description']; 
          //echo 'This is: ' . $name . ' ' . $description . "&lt;br/&gt;\n"
          $arr[] = $row;
      } 
      echo json_encode($arr);
  ?&gt;
  </code></pre>
  
  <p>controllers.js</p>
  
  <pre><code> function ProductListCtrl($scope,$http) {
      $http.get('php/connect.php').success(function(data) {
          $scope.products = data;
      });
      //$scope.orderProp = 'name';
  
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>    &lt;html ng-app&gt;
      &lt;head&gt;
          &lt;script src="../angular-1.0.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;ul ng:controller="ProductListCtrl"&gt;
          &lt;li ng:repeat="product in products"&gt;
              {{product.name}}
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I run <code>index.html</code>, I get infinite list of bullets with no result displayed.</p>
  
  <p>Where am I going wrong?</p>