My Schema looks like:

super.js:

var superSchema = new Schema({
  title: {
    type: String,
    default: '',
    trim: true
  },
  item: [{
    type: Schema.ObjectId,
    ref: 'Item'
  }]
});

item.js:

var itemSchema = new Schema({
  name: {
    type: String,
    default: '',
    trim: true
  }
});

My json then looks like this:

[{
    "title": "Team 1",
    "items": [
      "52c23f2129sdf1720d000006",
      "52c23f2129asd1720d000006",
      "52c23f212992cfdsd00000f6"]
},{
    "title": "Team 2",
    "items": [
      "52c23f2129sdf1720d000006",
      "52c23f2129asd1720d000006",
      "52c23f212992cfdsd00000f6"]
}]

Then I try and access the item[0].name in my list.html file like this {{item[0].name}} but it doesn't return anything and item[0] returns the id.

How can I access item[0].name in my angular html file?

My superDuperController.js:

$scope.find = function() {
    SuperDuper.query(function(superDuper) {
        $scope.superDuper = superDuper;
    });
};

You need to populate your items before sending the response to the client side.

Super.find({_id: super_id}).populate('item').exec(function(err, super) {
    if(err) {

    }
    else {
    // Populated the items
    // Send the **super** in response
    }

})

Now you can access {{item[0].name}} in your client side.