How can we remove square brackets [] and double quotes "" in angular js?

I am using MEAN stack in my application with AngularJS as my front-end. How can I remove Square Brackets [] and Double quotes "" in repeated answer, My plunker actually we need show role vlaues in my app so we have used ng-repeat="mani in name.comments " to get the answer, and we got the answer like ["user"], ["admin"], ["kp"] , what we exactly looking we just need to show the values alone, not with the [] Square Brackets and Double quotes.... for example answer would be:- values are without in [] Square Brackets and Double quotes like 1. user , 2. admin, 3. kp

My Data:-

$scope.name = {
"_id": "5863d3aaacaeddc00663bc07",

"comments": [
{
"created": 1485511936350,
"role": [
"user"
],
"email": "selvam@e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
},
{
"created": 1485511936350,
"role": [
"admin"
],
"email": "selvam@e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
},
{
"created": 1485511936350,
"role": [
"kp"
],
"email": "selvam@e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
}
],
"created": "2016-12-28T15:00:58.777Z",
"isCurrentUserOwner": false
};

My Html:-

<div ng-repeat="mani in name.comments ">

                <td>{{$index + 1}}</td>
                <td>{{mani.role }}</td>

              </div>

Please look at into My plunker for reference ...
Expecting answer would be without [] Square Brackets and Double quotes...
This role are within the array so that only it's showing with [] Square Brackets and Double quotes , so how can we remove this , we need to show only values... we have tried many ways we know it's simple task but we unable to solve this issue..
can we use css to remove this ?... any one knows the solution please help us... thanks
please update plunker as well to know the exact solution....

Solution

You just need to select the first element of the array at index 0 using:

{{ mani.role[0] }}

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = {
    "_id": "5863d3aaacaeddc00663bc07",

    "comments": [{
      "created": 1485511936350,
      "role": [
        "user"
      ],
      "email": "selvam@e21designs.com",
      "name": "selvam R",
      "commentText": "mani selvam"
    }, {
      "created": 1485511936350,
      "role": [
        "admin"
      ],
      "email": "selvam@e21designs.com",
      "name": "selvam R",
      "commentText": "mani selvam"
    }, {
      "created": 1485511936350,
      "role": [
        "kp"
      ],
      "email": "selvam@e21designs.com",
      "name": "selvam R",
      "commentText": "mani selvam"
    }],
    "created": "2016-12-28T15:00:58.777Z",
    "isCurrentUserOwner": false
  };
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <div ng-repeat="mani in name.comments ">

    <td>{{$index + 1}}</td>
    <td>{{ mani.role[0] }}</td>

  </div>


</body>

</html>