title: AngularJS Getting an extra space when converting comma separated value
body: <p>I trying to convert a JSON content into the comma separated value in a table format.</p>
  
  <p>I achieved this by using <code>table</code> with <code>ng-repeat</code>, but I am getting an extra space in end of the each value.</p>
  
  <p><strong>HTML code:</strong></p>
  
  <pre><code>&lt;div ng-controller="JsonConvertController"&gt;
      &lt;div&gt;
        &lt;button class="btn btn-success" id="btnjsonConvert" 
                ng-click="convertJsonToServiceValues()"&gt;Convert Json&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th style="width:100px;"&gt;Types&lt;/th&gt;
            &lt;th style="width:300px;"&gt;Values&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr ng-repeat="types in resultJson"&gt;
            &lt;td&gt;&lt;span ng-bind="types.typeName"&gt;&lt;/span&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;span ng-repeat="type in resultValues | filter: {typeName: types.typeName}"&gt;
              &lt;span ng-bind="type.values"&gt;&lt;/span&gt;
              &lt;span ng-show="!$last"&gt;,&lt;/span&gt;
              &lt;/span&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Controller code:</strong></p>
  
  <pre><code>function JsonConvertController($scope, $http) {
  
    $scope.displayTable = true;
  
    $http.get('data.json').success(function(data) {
      $scope.jsonContent = data;
    });
  
    $scope.convertJsonToServiceValues = function() {
      $scope.resultJson = [];
      $scope.resultValues = [];
  
      angular.forEach($scope.jsonContent[0].types, function(types) {
        $scope.resultJson.push({
          typeName: types.name,
        });
  
        angular.forEach(types.domainTypes.codedValues, function(type) {
          $scope.resultValues.push({
            typeName: types.name,
            values: type.name
          });
        });
      });
    };
  }
  </code></pre>
  
  <p><strong>Sample JSON</strong> looks like, [Exact code is in plunker]</p>
  
  <pre><code>[{
  "version": 0.01,
  "types": [{
  "id": 1,
  "name": "Type1",
  "domainTypes": {
    "type": "codedValue01",
    "codedValues": [{
      "name": "Type1Code1",
      "code": "t1c1"
    }, {
      "name": "Type1Code2",
      "code": "t1c2"
    }, {
    ...
    ...
    ...
    }]
   }
  }, {
  "id": 2,
  "name": "Type2",
  "domainTypes": {
    "type": "codedValue02",
    "codedValues": [{
      "name": "Type2Code1",
      "code": "t2c1"
    }, {
      "name": "Type2Code2",
      "code": "t2c2"
    }, {
    ...
    ...
    }]
   }
  }]
  </code></pre>
  
  <p>So, the <strong>output</strong> is coming like the below:</p>
  
  <pre><code>Types   Values
  Type1   Type1Code1 , Type1Code2 , Type1Code3 , Type1Code4 , Type1Code5 , 
          Type1Code6 , Type1Code7 , Type1Code8 , Type1Code9
  Type2   Type2Code1 , Type2Code2 , Type2Code3 , Type2Code4 , Type2Code5
  Type3   Type3Code1
  Type4   Type4Code1 , Type4Code2 , Type4Code3 , Type4Code4 , Type4Code5
  </code></pre>
  
  <p><strong>Problem</strong>: End of each value, I'm getting an extra space. Meant <code>Type1Code1 ,</code> after <code>1</code> and <code>,</code>, I'm getting the space.</p>
  
  <p>I don't need that. How can I remove/trim that?</p>
  
  <p>I tried <code>&lt;span&gt;{{type.values}}&lt;/span&gt;</code> instead of <code>&lt;span ng-bind="type.values"&gt;&lt;/span&gt;</code>, but got the same result. </p>
  
  <p>I manually set <code>trim()</code> like, <code>&lt;span ng-bind="trimContent(type.values)"&gt;&lt;/span&gt;</code> and in the controller, define the function</p>
  
  <pre><code>$scope.trimContent = function (content) {
      return content.trim();
  };
  </code></pre>
  
  <p>This also not works.</p>
  
  <p>Since I don't have any extra space in the JSON content. What is the issue?</p>
  
  <p>How can I get the comma separated values without extra space in end of each value?</p>
  
  <p>For better result, I added my code in the <a href="http://plnkr.co/edit/efoweY4UpDt9BpRjhbrq" rel="nofollow"><code>Plunker</code></a></p>