title: Model created in C++ can not be modified from QML
body: <p>SOLVED: I did everything like eyllanesc answer and in my FirstPage.qml inside 
  delegate where i access model data i put modelData before names. 
  Previously  inside FirstPage.qml delegate i used: name, completed and 
  uncompleted and now i use modelData.name, modelData.completed and 
  modelData.uncompleted. It is all fine now.</p>
  
  <p>I'm completely new in the QT/QML and I tried  but  could not find an answer for  my problem.</p>
  
  <p>I use model (created in c++) in QML. When app starts everything is fine but when i try to add new element to model it is not displayed in QML. Model is the same like from the start.</p>
  
  <p>I have class modcontroller and inside it i create list.</p>
  
  <p>modcontroller.h</p>
  
  <pre><code>#ifndef MODCONTROLLER_H
  #define MODCONTROLLER_H
  
  #include &lt;QObject&gt;
  #include &lt;list.h&gt;
  
  class modcontroller : public QObject
  {
      Q_OBJECT
  
  public:
      explicit modcontroller(QObject *parent = nullptr);
  
      QList&lt;QObject*&gt; getList();
  
      Q_INVOKABLE void addList(QString nam);
  
  signals:
      void listChanged();
  
  public slots:
  
  private:
      QList&lt;QObject*&gt; m_dataList;
  };
  
  #endif // MODCONTROLLER_H
  </code></pre>
  
  <p>modcontroller.cpp</p>
  
  <pre><code>#include "modcontroller.h"
  #include &lt;QDebug&gt;
  
  modcontroller::modcontroller(QObject *parent) : QObject(parent)
  {
      m_dataList.append(new List("Test"));
  }
  
  QList&lt;QObject *&gt; modcontroller::getList()
  {
      return m_dataList;
  }
  
  void modcontroller::addList(QString nam)
  {
      m_dataList.append(new List(nam));
      qDebug() &lt;&lt; "Function addList called";
  
      qDebug() &lt;&lt; m_dataList;
  }
  </code></pre>
  
  <p>main.cpp</p>
  
  <pre><code>#include &lt;QGuiApplication&gt;
  #include &lt;QQmlApplicationEngine&gt;
  #include &lt;QQmlContext&gt;
  
  #include "list.h"
  #include "modcontroller.h"
  
  int main(int argc, char *argv[])
  {
      QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
  
      QGuiApplication app(argc, argv);
  
  
      QQmlApplicationEngine engine;
  
  
      modcontroller controller;
      engine.rootContext()-&gt;setContextProperty("myModel", QVariant::fromValue(controller.getList()));
      engine.rootContext()-&gt;setContextProperty("controller",&amp;controller);
  
      engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
      if (engine.rootObjects().isEmpty())
          return -1;
  
  
  
      return app.exec();
  }
  </code></pre>
  
  <p>In QML file  i have ListView with <code>model: myModel</code>, and button with </p>
  
  <pre><code>onClicked: {
                  controller.addList(textInput.text)
                  myStackView.push(firstPage)
              }
  </code></pre>
  
  <p>When i click create i see only the first item "Test" that is created in the start but in the console i get this:</p>
  
  <pre><code>Function addList called
  (List(0x2b7e60bc2c0), List(0x2b82d5891b0))
  </code></pre>
  
  <p>Thanks in advance.</p>
  
  <p>main.qml</p>
  
  <pre><code>    ApplicationWindow {
          visible: true
          width: 580
          height: 360
          title: qsTr("Hello World")
  
          StackView{
              id: myStackView
              initialItem: firstPage
              anchors.fill: parent
          }
  
          Component{
              id: firstPage
              FirstPage{}
          }
  
          Component{
              id: createNewListPage
              CreateNewListPage{}
          }
  
      }
  </code></pre>
  
  <p>FirstPage.qml</p>
  
  <pre><code>Item {    
      ListView{
                  id: lists
                  width: 150
                  height: childrenRect.height
                  x: 15
                  y: 70
  
                  model: myModel
  
                  delegate: Row{
                      width: 150
                      height: 25
                      spacing: 5
  
                      Rectangle{
                          width: {
                              if(uncompleted &lt; 3){return 3;}
                              else if(uncompleted &lt; 6){return 6;}
                              else {return 10;}
                          }
                          height: {
                              if(uncompleted &lt; 3){return 3;}
                              else if(uncompleted &lt; 6){return 6;}
                              else {return 10;}
                          }
                          radius: 10
                          color: "#494949"
                          anchors.verticalCenter: parent.verticalCenter
                      }
                      Button {
                          id:button1
                          height: 23
  
                          contentItem: Text {
                              id: textTask
                              text: name
                              font.underline: true
                              color: "blue"
                              font.bold: true
                              font.pointSize: 10
                              height: 20
                              anchors.verticalCenter: parent.verticalCenter
                              anchors.left: parent.left
                          }
  
                          background: Rectangle {
                              id: rectangle
                              color: "transparent"
                          }
                          states:[
                              State {
                                  name: "Hovering"
                                  PropertyChanges {
                                      target: textTask
                                      color: "white"
                                      font.bold: true
                                      font.underline: false
                                  }
                                  PropertyChanges {
                                      target: rectangle
                                      color: "blue"
                                  }
                              }]
  
                          MouseArea{
                              hoverEnabled: true
                              anchors.fill: button1
                              onEntered: { button1.state='Hovering'}
                              onExited: { button1.state=''}
                          }
                      }
                      Text{
                          font.pointSize: 8
                          text: {
                              if(uncompleted == 0)return "";
                              return "- " + uncompleted + " left";
                          }
                          color: "#494949"
                          anchors.verticalCenter: parent.verticalCenter
                      }
                  }
              }
  }
  </code></pre>
  
  <p>CreateNewListPage.qml</p>
  
  <pre><code>Item {
     Rectangle{
         width: 580
         height: 360
  
         Rectangle{
          width: 350
          height: 30
          y: 100
          x: 30
          border.color: "#7b9cd3"
          border.width: 1
  
          TextInput {
              id: textInput
              anchors.topMargin: 3
              cursorVisible: true
              anchors.fill: parent
              font.bold: true
              font.pointSize: 14
          }
  
      }
  
  
  
         Button{
                  height: 20
                  text: "Create this list"
                  onClicked: {
                      controller.addList(textInput.text)
                      myStackView.push(firstPage)
                  }
  
                  background: Rectangle{
                      id: rect1
                      anchors.fill: parent
                      radius: 20
                      border.color: "#88b6cf"
                      gradient: Gradient {
                              GradientStop { position: 0.0; color: "#fcfefe" }
                              GradientStop { position: 1.0; color: "#d5e8f3" }
                      }
                  }
  
              }
  
       }
  }
  </code></pre>